Make flex items wrap to form 2-column grid

Question

I\'m trying to make a 2-column grid with flexbox but it is not producing the desired result. Instead it is producing 3 columns per row. Here is my markup and css:

相关标签:

Answer 1

An initial setting of a flex container is flex-wrap: nowrap. This means flex items will stack in a single line and not wrap.

Instead, use this:

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

---

Also, to force two columns per row, give each item flex-basis: 50% and 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>