title: How to create different number of columns layout by using flex?
body: <p>I want to create a layout which has four rows. The first two rows have four columns. The third row and fourth row have only two columns.</p>
  <p>I want the columns width are even distributed. So for the 4 columns, each of is 25% width stretch. For the two columns, each of takes 50% width. But there is gutter among the columns. The gutter's width is given say 25px. I can't get it work by flex. My some css code</p>
  <pre><code>.four-columns {
   display: flex;
   background-color: #b6701e;
   margin-bottom: 20px;
   justify-content: space-evenly;
  }
  </code></pre>
  <p>My html code:</p>
  <pre><code> &lt;div class=&quot;four-columns&quot;&gt;
    &lt;div&gt;First Quarter&lt;/div&gt;
    &lt;div&gt;Second Quarter&lt;/div&gt;
    &lt;div&gt;Third Quarter&lt;/div&gt;
    &lt;div&gt;Fourth Quarter&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><a href="https://codepen.io/ardmore/pen/BaQPRQb" rel="nofollow noreferrer">demo</a></p>
  <p><strong>UPDATE:</strong></p>
  <p>If I added <code>justify-content: space-evenly;</code> the column width are still not same. And for the two columns, I want the width is 50% and consider the gutter(margin)</p>