title: Masonry flexbox with order going horizontal instead of vertical with different heights
body: <p>I am currently using the following code to make a pure CSS masonry grid</p>
  
  <pre><code>.flex-container {
    display: flex;
    flex-flow: column wrap;
    height: 29em;
  }
  
  .flex-item {
    display: flex;
    font-size: 30px;
    min-height: 200px;  /* Would use just `height` but Firefox is weird */
    flex: 0 0 auto;
    width: 33.333%;
  }
  </code></pre>
  
  <p>This is working fine, however, I am manually inputting data from the backend and I am trying to get my content to go like this:</p>
  
  <pre><code>[1][2][3]
  [4][5][6]
  [7][8][9]
  </code></pre>
  
  <p>Instead, it ends up like this:</p>
  
  <pre><code>[1][4][7]
  [2][5][8]
  [3][6][9]
  </code></pre>
  
  <p>How can I achieve the horizontally counted layout? I also have a <a href="https://codepen.io/noobskie/pen/gGKMGg" rel="nofollow noreferrer">CodePen</a> showing my problem <strong>The heights are unknown</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.flex-container {
    display: flex;
    flex-flow: column wrap;
    height: 29em;
  }
  
  .flex-item {
    display: flex;
    font-size: 30px;
    min-height: 200px;  /* Would use just `height` but Firefox is weird */
    flex: 0 0 auto;
    width: 33.333%;
  }
  
  .flex-item:nth-child(1) {
    min-height: 250px;
  }
  
  .flex-item:nth-child(2) {
    min-height: 350px;
  }
  
  .flex-item:nth-child(3) {
  }
  
  .flex-item:nth-child(4) {
    min-height: 300px;
  }
  
  .flex-item:nth-child(5) {
    min-height: 250px;
  }
  
  .flex-item:nth-child(6) {
  }
  
  .flex-item:nth-child(7) {
    min-height: 250px;
  }
  
  .flex-item:nth-child(8) {
  }
  
  .flex-item:nth-child(9) {
    min-height: 400px;
  }
  
  
  /* cosmetic styles */
  
  body {
    font: 600 30px monospace;
  }
  
  .flex-item {
    background: #95a5a6;
    border-radius: 10px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;  /* to account for padding */
    color: #fff;
    padding: 15px;
  }
  
  .flex-item:nth-child(6n + 1) {
    background: #2ecc71;
  }
  .flex-item:nth-child(6n + 2) {
    background: #3498db;
  }
  .flex-item:nth-child(6n + 3) {
    background: #9b59b6;
  }
  .flex-item:nth-child(6n + 4) {
    background: #f1c40f;
  }
  .flex-item:nth-child(6n + 5) {
    background: #e67e22;
  }
  .flex-item:nth-child(6n) {
    background: #e74c3c;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="flex-container"&gt;
    &lt;div class="flex-item"&gt;1&lt;/div&gt;
    &lt;div class="flex-item"&gt;2&lt;/div&gt;
    &lt;div class="flex-item"&gt;3&lt;/div&gt;
    &lt;div class="flex-item"&gt;4&lt;/div&gt;
    &lt;div class="flex-item"&gt;5&lt;/div&gt;
    &lt;div class="flex-item"&gt;6&lt;/div&gt;
    &lt;div class="flex-item"&gt;7&lt;/div&gt;
    &lt;div class="flex-item"&gt;8&lt;/div&gt;
    &lt;div class="flex-item"&gt;9&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>