html - 使 flex 元素换行以形成 2 列网格

Question

我正在尝试使用 flexbox 制作一个 2 列的网格，但它没有产生预期的结果。相反，它每行生成 3 列。这是我的标记和 CSS:

#product_variants {
  display: flex;
}
#product_variants .product_addtocart_variant {
  padding: 10px;
}
#product_variants .product_addtocart_variant .box-tocart .variant-info {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}
#product_variants .product_addtocart_variant .box-tocart .variant-container {
  display: inline-flex;
}
#product_variants .product_addtocart_variant .box-tocart .variant-container .variant-price {
  font-weight: bold;
}
#product_variants .product_addtocart_variant .box-tocart .variant-container .quantity input {
  width: 52px;
  height: 52px;
  text-align: center;
  border: 3px solid #002855 !important;
}
#product_variants .product_addtocart_variant .box-tocart .actions button {
  background-color: transparent;
  border: 3px solid #ef7c00;
  color: #ef7c00;
  height: 52px;
}

<div id="product_variants">
  <form class="product_addtocart_variant" novalidate="novalidate">
    <div class="box-tocart">
      <div class="variant-info">
        <strong>322123-100 Exemplare</strong>
        <span>Artikelnummer: 322123-100 Exemplare</span>
      </div>
      <div class="fieldset">
        <div class="variant-container">
          <div class="variant-price">
            <span>Brutto: 432.0000</span>
            <span>Netto: </span>
          </div>
          <div class="quantity">
            <div class="control">
              <input type="number" name="qty" class="qty" maxlength="12" value="1" title="Anzahl" data-validate="{&quot;required-number&quot;:true,&quot;validate-item-quantity&quot;:{&quot;minAllowed&quot;:1}}">
            </div>
          </div>
          <div class="actions">
            <button type="submit" title="Zum Warenkorb hinzufügen" class="action primary tocart">
              <span>Zum Warenkorb hinzufügen</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </form>
  <form class="product_addtocart_variant" novalidate="novalidate">
    <div class="box-tocart">
      <div class="variant-info">
        <strong>322123-50 Exemplare</strong>
        <span>Artikelnummer: 322123-50 Exemplare</span>
      </div>
      <div class="fieldset">
        <div class="variant-container">
          <div class="variant-price">
            <span>Brutto: 232.0000</span>
            <span>Netto: </span>
          </div>
          <div class="quantity">
            <div class="control">
              <input type="number" name="qty" class="qty" maxlength="12" value="1" title="Anzahl" data-validate="{&quot;required-number&quot;:true,&quot;validate-item-quantity&quot;:{&quot;minAllowed&quot;:1}}">
            </div>
          </div>
          <div class="actions">
            <button type="submit" title="Zum Warenkorb hinzufügen" class="action primary tocart">
              <span>Zum Warenkorb hinzufügen</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </form>
  <form class="product_addtocart_variant" novalidate="novalidate">
    <div class="box-tocart">
      <div class="variant-info">
        <strong>322123-10 Exemplare</strong>
        <span>Artikelnummer: 322123-10 Exemplare</span>
      </div>
      <div class="fieldset">
        <div class="variant-container">
          <div class="variant-price">
            <span>Brutto: 132.0000</span>
            <span>Netto: </span>
          </div>
          <div class="quantity">
            <div class="control">
              <input type="number" name="qty" class="qty" maxlength="12" value="1" title="Anzahl" data-validate="{&quot;required-number&quot;:true,&quot;validate-item-quantity&quot;:{&quot;minAllowed&quot;:1}}">
            </div>
          </div>
          <div class="actions">
            <button type="submit" title="Zum Warenkorb hinzufügen" class="action primary tocart">
              <span>Zum Warenkorb hinzufügen</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

这是我的 example少

Answer 1

flex 容器的初始设置是flex-wrap: nowrap。这意味着 flex 元素将堆叠在一行中而不是换行。

相反，使用这个:

#product_variants {
  display: flex;
  flex-wrap: wrap; /* NEW */
}

---

此外，要强制每行两列，请为每个元素指定 flex-basis: 50% 和 box-sizing: border-box。

* {
  box-sizing: border-box;  /* NEW */
}
#product_variants {
  display: flex;
  flex-wrap: wrap;         /* NEW */
}
#product_variants .product_addtocart_variant {
  padding: 10px;
  flex-basis: 50%;         /* NEW */
}
#product_variants .product_addtocart_variant .box-tocart .variant-info {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}
#product_variants .product_addtocart_variant .box-tocart .variant-container {
  display: inline-flex;
}
#product_variants .product_addtocart_variant .box-tocart .variant-container .variant-price {
  font-weight: bold;
}
#product_variants .product_addtocart_variant .box-tocart .variant-container .quantity input {
  width: 52px;
  height: 52px;
  text-align: center;
  border: 3px solid #002855 !important;
}
#product_variants .product_addtocart_variant .box-tocart .actions button {
  background-color: transparent;
  border: 3px solid #ef7c00;
  color: #ef7c00;
  height: 52px;
}

<div id="product_variants">
  <form class="product_addtocart_variant" novalidate="novalidate">
    <div class="box-tocart">
      <div class="variant-info">
        <strong>322123-100 Exemplare</strong>
        <span>Artikelnummer: 322123-100 Exemplare</span>
      </div>
      <div class="fieldset">
        <div class="variant-container">
          <div class="variant-price">
            <span>Brutto: 432.0000</span>
            <span>Netto: </span>
          </div>
          <div class="quantity">
            <div class="control">
              <input type="number" name="qty" class="qty" maxlength="12" value="1" title="Anzahl" data-validate="{&quot;required-number&quot;:true,&quot;validate-item-quantity&quot;:{&quot;minAllowed&quot;:1}}">
            </div>
          </div>
          <div class="actions">
            <button type="submit" title="Zum Warenkorb hinzufügen" class="action primary tocart">
              <span>Zum Warenkorb hinzufügen</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </form>
  <form class="product_addtocart_variant" novalidate="novalidate">
    <div class="box-tocart">
      <div class="variant-info">
        <strong>322123-50 Exemplare</strong>
        <span>Artikelnummer: 322123-50 Exemplare</span>
      </div>
      <div class="fieldset">
        <div class="variant-container">
          <div class="variant-price">
            <span>Brutto: 232.0000</span>
            <span>Netto: </span>
          </div>
          <div class="quantity">
            <div class="control">
              <input type="number" name="qty" class="qty" maxlength="12" value="1" title="Anzahl" data-validate="{&quot;required-number&quot;:true,&quot;validate-item-quantity&quot;:{&quot;minAllowed&quot;:1}}">
            </div>
          </div>
          <div class="actions">
            <button type="submit" title="Zum Warenkorb hinzufügen" class="action primary tocart">
              <span>Zum Warenkorb hinzufügen</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </form>
  <form class="product_addtocart_variant" novalidate="novalidate">
    <div class="box-tocart">
      <div class="variant-info">
        <strong>322123-10 Exemplare</strong>
        <span>Artikelnummer: 322123-10 Exemplare</span>
      </div>
      <div class="fieldset">
        <div class="variant-container">
          <div class="variant-price">
            <span>Brutto: 132.0000</span>
            <span>Netto: </span>
          </div>
          <div class="quantity">
            <div class="control">
              <input type="number" name="qty" class="qty" maxlength="12" value="1" title="Anzahl" data-validate="{&quot;required-number&quot;:true,&quot;validate-item-quantity&quot;:{&quot;minAllowed&quot;:1}}">
            </div>
          </div>
          <div class="actions">
            <button type="submit" title="Zum Warenkorb hinzufügen" class="action primary tocart">
              <span>Zum Warenkorb hinzufügen</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>