title: Make flex items expand to full width of a row, but all stay the same size in another
body: <p>So basically, what I have here is a contact page, that shows each contact's info inside a card. It's basically flex container with flex items. I want cards to expand to full width of a first row (5 cards in a row on desktop). I have managed to achieve that but what I want to have is to have all the cards be the same width. For example if user has 7 contacts, first 5 cards will be displayed in a first row nicely, but second two will expand to take the full width of the second row. Is it possible to make those cards the same width as others?</p>
  
  <p><a href="https://i.stack.imgur.com/7VEF9.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7VEF9.jpg" alt="Flexbox"></a></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="d-flex flex wrap"&gt;
    &lt;div class="contact-card"&gt;
    &lt;div&gt;
    &lt;div class="contact-card"&gt;
    &lt;div&gt;
    &lt;div class="contact-card"&gt;
    &lt;div&gt;
    &lt;div class="contact-card"&gt;
    &lt;div&gt;
    &lt;div class="contact-card"&gt;
    &lt;div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>.contact-card {
     flex: 1 1 0;
  }
  
  </code></pre>