title: Move single element to the end of a flex container
body: <p>I thought that I'd be able to shift this single button to the end of a flex-box. </p>
  
  <p>I have set the parent to be a <code>display: flex;</code> and then I thought that I'd be able to target one element and pin it to the bottom of the container with <code>align-self: flex-end;</code></p>
  
  <p>It doesn't work. Here is my pen: <a href="http://codepen.io/joshsmith01/pen/XJoEKM" rel="noreferrer">My Codepen illustrating the issue</a></p>
  
  <pre><code> &lt;div class="row services"&gt;
    &lt;div class="small-3 panel columns service"&gt;
      &lt;i class="fa fa-thumbs-o-up"&gt;&lt;/i&gt;
      &lt;h3&gt;SUSPENDISSE&lt;/h3&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, ad?&lt;/p&gt;
      &lt;div class="button"&gt;Read More&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="small-3 panel columns service"&gt;
      &lt;i class="fa fa-key"&gt;&lt;/i&gt;
      &lt;h3&gt;MAECENAS&lt;/h3&gt;&lt;p&gt;Porro quibusdam nostrum eaque, quasi laudantium delectus quaerat cumque, quos.&lt;/p&gt;
      &lt;div class="button"&gt;Read More&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="small-3 panel columns service"&gt;
      &lt;i class="fa fa-flag"&gt;&lt;/i&gt;
      &lt;h3&gt;ALIQUAM&lt;/h3&gt;&lt;p&gt;Iste architecto omnis, esse facere quod ratione, officia veritatis fugit.&lt;/p&gt;
      &lt;div class="button"&gt;Read More&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="small-3 panel columns service"&gt;
      &lt;i class="fa fa-flask"&gt;&lt;/i&gt;
      &lt;h3&gt;HABITASSE&lt;/h3&gt;&lt;p&gt;Ducimus voluptates assumenda, illum adipisci sed quaerat est ipsum nisi.&lt;/p&gt;
      &lt;div class="button"&gt;Read More&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  .services {
    display: flex;
  
  }
  .service {
    flex-direction: column;
  }
  .button {
    align-self: flex-end;
  }
  </code></pre>