title: Unable to center flex item using align-self
body: <p>I have a simple layout requirement where I want to display a header and a logo as normal, and vertically center the content on the page.</p>
  
  <p>To my understanding this should be easily achievable via flexbox using the <code>align-self</code> property.</p>
  
  <p>Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,
  body {
    height: 100%;
  }
  .base {
    display: flex;
    align-content: flex-start;
    flex-wrap: wrap;
    min-height: 100%;
    background: blue;
  }
  .header {
    flex-grow: 1;
    flex-basis: 100%;
    height: 30px;
    background: yellow;
  }
  .logo {
    flex-grow: 1;
    flex-basis: 100%;
    height: 50px;
    background: orange;
  }
  .content {
    flex-grow: 1;
    flex-basis: 100%;
    align-self: center; /* &lt;&lt;&lt; DOESN"T SEEM TO WORK */
    background: green;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="base"&gt;
    &lt;div class="header"&gt;HEADER&lt;/div&gt;
    &lt;div class="logo"&gt;LOGO&lt;/div&gt;
    &lt;div class="content"&gt;CONTENT&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong><a href="https://jsfiddle.net/m4qL824u/4/" rel="nofollow noreferrer">jsFiddle</a></strong></p>