title: Why is Flex box stacking items from a grid
body: <p>I'm using <a href="https://masonry.desandro.com/" rel="nofollow noreferrer">masonry.js</a> to create a picture grid.</p>
  
  <p>My html is like this:</p>
  
  <pre><code>&lt;div class="new-starter-grid"&gt;
      &lt;div class="new-starter-grid-item"&gt;&lt;/div&gt;
      &lt;div class="new-starter-grid-item"&gt;&lt;/div&gt;
      &lt;div class="new-starter-grid-item"&gt;&lt;/div&gt;
      &lt;div class="new-starter-grid-item"&gt;&lt;/div&gt;
      &lt;div class="new-starter-grid-item"&gt;&lt;/div&gt;
      &lt;div class="new-starter-grid-item"&gt;&lt;/div&gt;
      &lt;div class="new-starter-grid-item"&gt;&lt;/div&gt;
      &lt;div class="new-starter-grid-item"&gt;&lt;/div&gt;
      &lt;div class="new-starter-grid-item"&gt;&lt;/div&gt;
      &lt;div class="new-starter-grid-item"&gt;&lt;/div&gt;
      &lt;div class="new-starter-grid-item"&gt;&lt;/div&gt;
      &lt;div class="new-starter-grid-item"&gt;&lt;/div&gt;
      &lt;div class="new-starter-grid-item"&gt;&lt;/div&gt;
      &lt;div class="new-starter-grid-item"&gt;&lt;/div&gt;
      &lt;div class="new-starter-grid-item"&gt;&lt;/div&gt;
      &lt;div class="new-starter-grid-item"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The css that styles these elements is the following:</p>
  
  <pre><code>.new-starter-grid
  {
      top: 20%;
      max-width: 60%;
  }
  
  .new-starter-grid-item
  {
      float: left;
      width: 120px;
      height: 120px;
      border-radius: 3px;
      background: #D26;
      margin-bottom: 10px;
  }
  </code></pre>
  
  <p>This works perfectly, and creates a grid that looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/RA4hh.png" alt="Grid"></p>
  
  <p>I'm now trying to wrap the grid in a container (that also blacks out the screen) and display it in the centre.</p>
  
  <p>To do this, I simply wrap the grid element with another div, like this:</p>
  
  <pre><code>&lt;div class="new-starter-modal"&gt;
      &lt;div class="new-starter-grid"&gt;
          &lt;div class="new-starter-grid-item"&gt;&lt;/div&gt;
          &lt;div class="new-starter-grid-item"&gt;&lt;/div&gt;
          &lt;div class="new-starter-grid-item"&gt;&lt;/div&gt;
          &lt;div class="new-starter-grid-item"&gt;&lt;/div&gt;
          &lt;div class="new-starter-grid-item"&gt;&lt;/div&gt;
          &lt;div class="new-starter-grid-item"&gt;&lt;/div&gt;
          &lt;div class="new-starter-grid-item"&gt;&lt;/div&gt;
          &lt;div class="new-starter-grid-item"&gt;&lt;/div&gt;
          &lt;div class="new-starter-grid-item"&gt;&lt;/div&gt;
          &lt;div class="new-starter-grid-item"&gt;&lt;/div&gt;
          &lt;div class="new-starter-grid-item"&gt;&lt;/div&gt;
          &lt;div class="new-starter-grid-item"&gt;&lt;/div&gt;
          &lt;div class="new-starter-grid-item"&gt;&lt;/div&gt;
          &lt;div class="new-starter-grid-item"&gt;&lt;/div&gt;
          &lt;div class="new-starter-grid-item"&gt;&lt;/div&gt;
          &lt;div class="new-starter-grid-item"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And I use the following styling to attempt to center the grid in the new div:</p>
  
  <pre><code>.new-starter-modal
  {
      position: fixed;
      display: flex;
      justify-content: center;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.9);
      transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
      z-index: 9999 !important; /* To make sure no pesky components decide to go on top of the this modal */
  }
  </code></pre>
  
  <p>The grid technically gets centered, but it ends up stacking all the items like this:</p>
  
  <p><img src="https://i.stack.imgur.com/C21ZO.png" alt="Flex box grid"></p>
  
  <p>I obviously don't want this to happen, and would ideally like the grid to stay the same as in picture one, only centered horizontally (which is why I'm using flex box).</p>
  
  <p>Can someone explain me to why this is happening, and how I could fix it?</p>