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

【问题标题】：Flex Box aligning items in center instead of leftFlex Box 将项目居中而不是左对齐
【发布时间】：2021-10-07 21:37:57
【问题描述】：

所以我使用 col-3 / col-12 网格系统并使用 flexbox 在产品显示中对齐我的项目。无论出于何种原因，当我在每一行中没有“四个”产品时，它会将我的产品显示框对齐在中心，而不是在本示例中为“左”的相应列下方。有关其他详细信息，请参阅随附的屏幕截图。另外，我尝试创建一个新行以查看这些项目是否会与左侧对齐，但这也不起作用。如果您需要更多信息，请告诉我 - 我是新手！

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;
}


@media only screen and (max-width: 1200px) {
    .caster-series-image {
        max-width: 290px;
        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;
    }    
}

 <div class="row">
        <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;">Avant</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;">Genesis</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;">Optimus</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;">Eclipse</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;">Optimus</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;">Eclipse</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>

【问题讨论】：

尝试使用justify-content: flex-start; 将 div 定位在左侧
边距自动将项目/内容放在中间 ``` .product-display .row { max-width: 100%;边距：自动；上边距：4rem； } ```

标签： html css magento2

【解决方案1】：

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

试试这个 css 代码：

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

【讨论】：

嘿，这似乎不起作用。但是，我正在玩它并且能够找到解决方案。 .row-spacing { 并添加边距：初始；有人可以告诉我这是否是一个永久的解决方案，我不会在路上遇到问题吗？
嗨卡梅隆。很高兴你找到了修复它的方法。这也是一种正确的做法。

【解决方案2】：

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

这似乎成功了！ -->

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

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

【讨论】：