html - Flex Box 在中心而不是左对齐元素

Question

所以我使用 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>

Answer 1

从行中删除边距，因为这会导致产品在两侧都有边距，从而导致产品向中间移动。
试试这个 css 代码:

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