fefe fefe - 7 months ago 18
HTML Question

Flex items not wrapping to form 2-column grid

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:



#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>





here I have my example with less

Answer

An initial setting of a flex container is flex-wrap: nowrap, meaning flex items will align horizontally and not wrap.

You need to override this setting. Try this:

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

Also consider adding box-sizing: border-box and flex-basis: 50% to force two columns per row.

* {
  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>

Comments