Vertically aligning two flex items
<p>I have a flex container <code>.container</code> and two flex items: <code>item-one</code> and <code>item-two</code>. I want to vertically center the first item and to stick the second to the bottom. </p>

<p><strong>I don't know how to vertically align the first item in this context.</strong></p>

<p><strong>HTML:</strong></p>

<pre><code>&lt;div class="container"&gt;
  &lt;div class="item-one"&gt;Item One&lt;/div&gt;
  &lt;div class="item-two"&gt;Item Two&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><strong>CSS:</strong></p>

<pre><code>html, body {
  height: 100%;
  margin: 0;
}

.container {
  width: 500px;
  margin: 0 auto;
  border: 5px solid orange;
  height: 100%;

  /* Flex properties */
  display: flex;
  flex-wrap: wrap;  
  align-items: center;
  justify-content: center;
}

.item-one {
  border: 5px solid yellow;
  flex-basis: 500px;    
}

.item-two {
  border: 5px solid red;
  align-self: flex-end;
}
</code></pre>

<p><a href="http://codepen.io/jNek/pen/zrZrLL" rel="nofollow"><strong>CodePen</strong></a></p>