title: Using Flexbox, can I change the amount of items displayed on a row, depending on how many items are added
body: <p>Scenario:</p>
  <p>Using flexbox, I'm creating a template where the number of 'cards' displayed can change from page to page. If a user adds 2, 3 or 4 cards – the layout is great.</p>
  <p>However, if a user adds 5 cards, the layout is now less aesthetically pleasing with the 5th card alone on a new row.</p>
  <p>Is there a way I can display up to 4 cards on a row, but if there are 5+ cards.. then the first row would display 3 cards, and the second row would display 2?</p>
  <p>Here's a general idea of how the code would be displayed.</p>
  <pre><code>&lt;style&gt;
    .cards-wrapper {
      display: flex;
      flex-wrap: wrap;
    }
    
    .cards-wrapper .card {
      flex: 1 1 20%;
      margin: 10px;
    }
  &lt;/style&gt;
  
  &lt;div class=&quot;cards-wrapper&quot;&gt;
  
    &lt;div class=&quot;card&quot;&gt; &lt;/div&gt;
  
    &lt;div class=&quot;card&quot;&gt; &lt;/div&gt;
  
    &lt;div class=&quot;card&quot;&gt; &lt;/div&gt;
  
    &lt;div class=&quot;card&quot;&gt; &lt;/div&gt;
  
    &lt;div class=&quot;card&quot;&gt; &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>