title: CSS flexbox vertical stack with bottom-anchored element
body: <p>How can I use flexbox layouts to create a vertical stack (column) of divs with one div anchored to the bottom of the container?</p>
  
  <pre><code>|--------|
  |  div1  |
  |  div2  |
  |  div3  |
  |        |
  |        |
  |        |
  | fixed1 |
  |--------|
  </code></pre>
  
  <p>For example, in this <a href="http://jsfiddle.net/mv241w0x/1/" rel="nofollow">fiddle</a> I want Items 1, 2, and 3 to be horizontally centered and vertically aligned to the top and Fixed Item to be horizontally centered and vertically aligned to the bottom.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="item"&gt;Item 1&lt;/div&gt;
      &lt;div class="item"&gt;Item 2&lt;/div&gt;
      &lt;div class="item"&gt;Item 3&lt;/div&gt;
      &lt;div class="fixed"&gt;Fixed Item&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>html, body {
      min-height: 100%;
      height: 100%;
  }
  
  .container {
      height: 50%;
      background: #EEE;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      align-content: center;
  }
  
  .fixed {
      align-self: flex-end;
  }
  </code></pre>