title: How to control number of items per row using media queries in Flexbox?
body: <p>So imagine I have the following <strong>Markup</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the following <strong>styles</strong> <em>(SASS)</em></p>
  
  <pre><code>@mixin max-width($width) {
      @media screen and (max-width: $width) {
          @content;
      }
  }
  
  .container {
      display: flex;
  
      @include max-width(992px) {
          number: 4; //Hypothetical property that is supposed to control number per row
      }
  
      @include max-width(640px) {
          number: 2; //Hypothetical property that is supposed to control number per row
      }
  }
  .item {
      background-color: tomato;
      padding: 20px;
      margin-right: 20px;
      flex: 1;
  }
  </code></pre>
  
  <p>Is there a real Flexbox CSS alternative to my hypothetical <code>number</code> property that can control how many items to show per row ?</p>
  
  <p>The float-like grid was handy because you could fit unlimited <code>.items</code> per one <code>.row</code> because of the <code>width</code>. But with flexbox I have to use workarounds like numerous <code>.row</code> classes to control the layout and number of items at different width. I've been lucky so far, but there are certain type of layout which will fail with such an approach.</p>
  
  <p><a href="http://codepen.io/knitevision1/pen/yNRozO?editors=110" rel="noreferrer">Codepen link to demonstrate</a></p>