css - 基于父容器宽度的 flexbox 元素宽度

Question

我有一个具有最大宽度的父容器，我希望一行有 3 个框。我为此使用 flex，但我希望盒子占据父容器的整个宽度，我只能通过硬编码盒子的宽度来实现。我怎样才能让它们适应部分容器的宽度，而不是我在盒子上放置 32% 的宽度？

HTML

<div class="account-component>
   <div class="cart-products-container">
      <div class="sections">
            <div class="cart-product">
            </div>
            <div class="cart-product">
            </div>
            <div class="cart-product">
            </div>
            <div class="cart-product">
            </div>
            <div class="cart-product">
            </div>
            <div class="cart-product">
            </div>
      </div>
   </div>
</div>

CSS

.account-component {
    max-width: 1240px;
    text-align: center;
    margin: 0 auto;
    display: flex;
    margin-top: 100px;
    .sections {
        display: flex;
        flex-wrap: wrap;

        .cart-product {
             width: 32%;
             margin-bottom: 25px;
             height: 445px;
             background-color: pink;
             &:nth-child(3n+2) {
                margin-right: 24px;
                margin-left: 24px;
             }
        }

    }
}

Answer 1

为了得到想要的效果，你只需要改变:

.cart-product {
   flex: 0 0 33%;
   margin-bottom: 25px;
   height: 445px;
   background-color: pink;
}