title: Apply different flow in the same container with flexbox
body: <p>I'd like to have the <code>h1</code> element to the top of the container, on the center, with <code>column</code> direction. How do I align it?</p>
  
  <p><strong><a href="http://codepen.io/gsg/pen/yYJyNb" rel="nofollow">CodePen</a></strong></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="container"&gt;  
    &lt;h1&gt;Description&lt;/h1&gt;
  
  &lt;figure class="gallery-item"&gt;
    &lt;span class="helper"&gt;&lt;/span&gt;&lt;img src="http://placehold.it/300x300"&gt;
    &lt;figcaption class="img-title"&gt;
      &lt;h5&gt;Image Title&lt;/h5&gt;
    &lt;/figcaption&gt;
  &lt;/figure&gt;
  
  &lt;figure class="gallery-item"&gt;
    &lt;span class="helper"&gt;&lt;/span&gt;&lt;img src="http://placehold.it/300x300"&gt;
    &lt;figcaption class="img-title"&gt;
      &lt;h5&gt;Image Title&lt;/h5&gt;
    &lt;/figcaption&gt;
  &lt;/figure&gt;
  
  &lt;figure class="gallery-item"&gt;
    &lt;span class="helper"&gt;&lt;/span&gt;&lt;img src="http://placehold.it/300x300"&gt;
    &lt;figcaption class="img-title"&gt;
      &lt;h5&gt;Image Title&lt;/h5&gt;
    &lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.container { 
    display: flex;     
    flex-direction: row;  
    align-items: center;
    height: 75vh;
    background: grey;   
    justify-content: space-around; 
  }
  </code></pre>
  
  <p>Thanks!</p>