title: Staggering items in CSS with flexbox
body: <p>I'm trying to create a staggered layout in CSS, where each row only has one item, but it will be offset from the items on the other rows.</p>
  
  <p>I've made two working examples so far, but I'm wondering if there is a better way to achieve this.</p>
  
  <p>Here's an example I made using spacer divs : 
  <a href="http://cdpn.io/e/EWrMgL" rel="nofollow noreferrer">http://cdpn.io/e/EWrMgL</a></p>
  
  <p>HTML :</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="spacer"&gt;(spacer)&lt;/div&gt;
          &lt;div class="content col-2"&gt;content 2&lt;/div&gt;
          &lt;div class="spacer"&gt;(spacer)&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="content col-1"&gt;content 1&lt;/div&gt;
          &lt;div class="spacer"&gt;(spacer)&lt;/div&gt;
          &lt;div class="spacer"&gt;(spacer)&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="spacer"&gt;(spacer)&lt;/div&gt;
          &lt;div class="spacer"&gt;(spacer)&lt;/div&gt;
          &lt;div class="content col-3"&gt;content 3&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="spacer"&gt;(spacer)&lt;/div&gt;
          &lt;div class="spacer"&gt;(spacer)&lt;/div&gt;
          &lt;div class="content col-3"&gt;content 3&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS : </p>
  
  <pre><code>.container, .spacer, .content, .row {
      display: flex;
  }
  
  .container {
      flex-flow: row wrap;
      font-family: sans-serif;
  }
  
  .row {
      width: 100%
  }
  
  .spacer {
      color: #2c3e50;
      flex: 1 1 0%;
  }
  
  .content {
      color: #ecf0f1;
      flex : 3 1 0%;
      flex-basis: 60%
  }
  
  .content, .spacer {
      justify-content: center;
      align-items: center;
      min-height: 5em;
      margin: 0.5em;
  }
  
  .col-1 {
      background-color: #96858F;
  }
  
  .col-2 {
       background-color:#9099A2;
  }
  
  .col-3 {
      background-color: #6d7993;
  }
  </code></pre>
  
  <hr>
  
  <p>I made another attempt at a cleaner version using margins instead of wrapping
  each item in a row : <a href="http://cdpn.io/e/xqMBmB" rel="nofollow noreferrer">http://cdpn.io/e/xqMBmB</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
          &lt;div class="content col-2"&gt;content 2&lt;/div&gt;
          &lt;div class="content col-1"&gt;content 1&lt;/div&gt;
          &lt;div class="content col-3"&gt;content 3&lt;/div&gt;
          &lt;div class="content col-3"&gt;content 3&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.container, .content{
      display: flex;
  }
  
  .container {
      flex-flow: row wrap;
      font-family: sans-serif;
  }
  
  .content {
      color: #ecf0f1;
      flex: 0 1 70%;
  
      justify-content: center;
      align-items: center;
      min-height: 5em;
      margin-bottom: 0.5em;
  }
  
  .col-1 {
      background-color: #96858F;
  }
  
  .col-2 {
      background-color:#9099A2;
      margin-left: 7.5%;
  }
  
  .col-3 {
      background-color: #6d7993;
      margin-left: 15%;
  }
  </code></pre>
  
  <hr>
  
  <p>Is there a cleaner way to do this than enclosing each row in a div or changing the margins? I'll want to add @media rules to make the rows 100% width below a certain screen size.</p>