Flex Box 将项目居中而不是左侧对齐

Question

所以我正在使用 col-3 / col-12 系统，该系统使用 flexbox 在产品展示中对齐我的项目。无论出于何种原因，当我在每一行中没有“四个”产品时，它会将我的产品展示框对齐在中心而不是在相应的列下方，对于本例来说，这将是“LEFT”。

有关更多详细信息，请参阅随附的屏幕截图。此外，我尝试创建一个新行以查看这些项目是否会向左对齐，但这也不起作用。如果您需要更多信息，请告诉我 - 我是堆栈的新手！

How I want them to be aligned.

Aligns perfectly when 4 products fill the row.

.product-display .col-content {
  -webkit-box-shadow: 1px 2px 6px -1px rgb(0 0 0 / 20%);
  -moz-box-shadow: 1px 2px 6px -1px rgba(0, 0, 0, 0.2);
  -ms-box-shadow: 1px 2px 6px -1px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 2px 6px -1px rgb(0 0 0 / 50%);
  padding: 0 1rem 1.5rem;
  margin: 0 .5rem .5rem;
  text-align: center;
  padding-top: 3%;
  padding-bottom: 3%;
  border-radius: 5px;
}

.product-display .row {
  max-width: 100%;
  margin: auto;
  margin-top: 4rem;
}

.product-name {
  margin-top: 0rem;
  margin-bottom: 2rem;
  position: relative;
  max-width: 100%;
  margin-bottom: 2rem;
  font-weight: bold;
  padding-left: 1.5rem;
}

.row-spacing {
  padding-bottom: 4rem;
  max-width: 100%;
}

.bullet-text {
  margin-top: 0rem;
  margin-bottom: .5rem;
  font-size: medium;
  text-align: left;
}

.caster-series-image {
  width: auto;
  height: auto;
  border: 0;
  margin: 0px;
  padding: 10px;
}

img {
  max-width: 100%;
}

@media only screen and (max-width: 1200px) {
  .caster-series-image {
    max-height: 290px;
    padding: 10px;
  }
}

@media only screen and (max-width: 1200px) {
  .col-content {
    width: 100%;
    max-height: auto;
    text-align: center;
    box-sizing: border-box;
  }
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="row flex-wrap">
  <div class="col-3 row-spacing">
    <div class="col-12">
      <h3 class="product-name"><a href="{{config path=" web/secure/base_url "}}/brands/shepherd-casters/casters/avant-series.html"><span style="color: #007dbd;">Product</span></a></h3>
      <div class="col-content">
        <a href="{{config path=" web/secure/base_url "}}/brands/shepherd-casters/casters/avant-series.html"><img src="https://casterdepot.com/media/Shepherd/avant.jpg" class="caster-series-image" alt=""></a>
      </div>
    </div>
    <div class="col-12">
      <div class="col-content">
        <ul class="bullet-text">
          <li><b>Capacity:</b> 80-100 lbs</li>
          <li><b>Sizes:</b> 2", 3", 4", 5"</li>
          <li><b>Height:</b> 2 &frac34;" - 3 <sup>7</sup>&#8260;<sub>32</sub>"</li>
        </ul>
        <a href="{{config path=" web/secure/base_url "}}/brands/shepherd-casters/casters/avant-series.html">
          <button class="cd-button" type="button">Read More</button>
        </a>
      </div>
    </div>
  </div>
  <div class="col-3 row-spacing">
    <div class="col-12">
      <h3 class="product-name"><a href="{{config path=" web/secure/base_url "}}/brands/shepherd-casters/casters/genesis-series.html"><span style="color: #007dbd;">Product</span></a></h3>
      <div class="col-content">
        <a href="{{config path=" web/secure/base_url "}}/brands/shepherd-casters/casters/genesis-series.html"><img src="https://casterdepot.com/media/Shepherd/genesis.jpg" class="caster-series-image" alt=""></a>
      </div>
    </div>
    <div class="col-12">
      <div class="col-content">
        <ul class="bullet-text">
          <li><b>Capacity:</b> 110-225 lbs</li>
          <li><b>Sizes:</b> 2", 3"</li>
          <li><b>Height:</b> 2" - 5 &frac58;"</li>
        </ul>
        <a href="{{config path=" web/secure/base_url "}}/brands/shepherd-casters/casters/genesis-series.html">
          <button class="cd-button" type="button">Read More</button>
        </a>
      </div>
    </div>
  </div>
  <div class="col-3 row-spacing">
    <div class="col-12">
      <h3 class="product-name"><a href="{{config path=" web/secure/base_url "}}/brands/shepherd-casters/casters/optimus-series.html"><span style="color: #007dbd;">Product</span></a></h3>
      <div class="col-content">
        <a href="{{config path=" web/secure/base_url "}}/brands/shepherd-casters/casters/optimus-series.html"><img src="https://casterdepot.com/media/Shepherd/optimus.jpg" class="caster-series-image" alt=""></a>
      </div>
    </div>
    <div class="col-12">
      <div class="col-content">
        <ul class="bullet-text">
          <li><b>Capacity:</b> 140 lbs</li>
          <li><b>Sizes:</b> 2 &frac18;"</li>
          <li><b>Height:</b> 4 <sup>9</sup>&#8260;<sub>32</sub>"</li>
        </ul>
        <a href="{{config path=" web/secure/base_url "}}/brands/shepherd-casters/casters/optimus-series.html">
          <button class="cd-button" type="button">Read More</button>
        </a>
      </div>
    </div>
  </div>
  <div class="col-3 row-spacing">
    <div class="col-12">
      <h3 class="product-name"><a href="{{config path=" web/secure/base_url "}}/brands/shepherd-casters/casters/eclipse-series.html"><span style="color: #007dbd;">Product</span></a></h3>
      <div class="col-content">
        <a href="{{config path=" web/secure/base_url "}}/brands/shepherd-casters/casters/eclipse-series.html"><img src="https://casterdepot.com/media/Shepherd/eclipse.jpg" class="caster-series-image" alt=""></a>
      </div>
    </div>
    <div class="col-12">
      <div class="col-content">
        <ul class="bullet-text">
          <li><b>Capacity:</b> 120-125 lbs</li>
          <li><b>Sizes:</b> 3", 4"</li>
          <li><b>Height:</b> 4 <sup>5</sup>&#8260;<sub>16</sub>" - 5 &frac58;"</li>
        </ul>
        <a href="{{config path=" web/secure/base_url "}}/brands/shepherd-casters/casters/eclipse-series.html">
          <button class="cd-button" type="button">Read More</button>
        </a>
      </div>
    </div>
  </div>
</div>
<div class="col-3 row-spacing">
  <div class="col-12">
    <h3 class="product-name"><a href="{{config path=" web/secure/base_url "}}/brands/shepherd-casters/casters/optimus-series.html"><span style="color: #007dbd;">Product</span></a></h3>
    <div class="col-content">
      <a href="{{config path=" web/secure/base_url "}}/brands/shepherd-casters/casters/optimus-series.html"><img src="https://casterdepot.com/media/Shepherd/optimus.jpg" class="caster-series-image" alt=""></a>
    </div>
  </div>
  <div class="col-12">
    <div class="col-content">
      <ul class="bullet-text">
        <li><b>Capacity:</b> 140 lbs</li>
        <li><b>Sizes:</b> 2 &frac18;"</li>
        <li><b>Height:</b> 4 <sup>9</sup>&#8260;<sub>32</sub>"</li>
      </ul>
      <a href="{{config path=" web/secure/base_url "}}/brands/shepherd-casters/casters/optimus-series.html">
        <button class="cd-button" type="button">Read More</button>
      </a>
    </div>
  </div>
</div>
<div class="col-3 row-spacing">
  <div class="col-12">
    <h3 class="product-name"><a href="{{config path=" web/secure/base_url "}}/brands/shepherd-casters/casters/eclipse-series.html"><span style="color: #007dbd;">Product</span></a></h3>
    <div class="col-content">
      <a href="{{config path=" web/secure/base_url "}}/brands/shepherd-casters/casters/eclipse-series.html"><img src="https://casterdepot.com/media/Shepherd/eclipse.jpg" class="caster-series-image" alt=""></a>
    </div>
  </div>
  <div class="col-12">
    <div class="col-content">
      <ul class="bullet-text">
        <li><b>Capacity:</b> 120-125 lbs</li>
        <li><b>Sizes:</b> 3", 4"</li>
        <li><b>Height:</b> 4 <sup>5</sup>&#8260;<sub>16</sub>" - 5 &frac58;"</li>
      </ul>
      <a href="{{config path=" web/secure/base_url "}}/brands/shepherd-casters/casters/eclipse-series.html">
        <button class="cd-button" type="button">Read More</button>
      </a>
    </div>
  </div>
</div>

Answer 1

从行中删除边距，因为这会导致产品两边都有边距，从而导致产品移到中间。

试试这个 css 代码：

.product-display .row {
    max-width: 100%;
    margin-top: 4rem;
}

Answer 2

我无法使它与 .product display 上的 margin 一起使用。但是 - 感谢您让我知道它与保证金有关。

这似乎可以解决问题！ -->

我在 CSS 中添加了以下内容：

.row-spacing {
    padding-bottom: 4rem;
    max-width: 100%;
    margin: initial;
}

Flex Box 将项目居中而不是左侧对齐

Flex Box aligning items in center instead of left

html

css

flexbox

magento2