title: Equal vertical spacing with a Flexbox column
body: <p>I am struggling in css to get my flexbox to display the items in a column equally spaced vertically, so even space between each row of the column.</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,
  .flex-container {
    margin: 0;
    height: 100%;
    width: 100%;
  }
  
  body {
    font-family: 'Droid Sans', sans-serif;
    overflow: hidden;
    background-color: #2b2b2b;
  }
  
  .flex-container {
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #2b2b2b;
  }
  
  img {
    border-radius: 50%;
    max-width: 400px;
    max-height: auto;
  }
  
  .home-flex {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="flex-container"&gt;
    &lt;h1&gt;Name&lt;/h1&gt;
    &lt;img src="image.png"&gt;
    &lt;div class="home-flex"&gt;
      &lt;a title="twitter" href="#"&gt;
        &lt;i&gt;twitter&lt;/i&gt;
      &lt;/a&gt;
      &lt;a title="github" href="#"&gt;
        &lt;i&gt;github&lt;/i&gt;
      &lt;/a&gt;
      &lt;a title="stackoverflow" href="#"&gt;
        &lt;i&gt;stackoverflow&lt;/i&gt;
      &lt;/a&gt;
      &lt;a title="linkedin" href="#"&gt;
        &lt;i&gt;linkedin&lt;/i&gt;
      &lt;/a&gt;
      &lt;a title="facebook" href="#"&gt;
        &lt;i&gt;facebook&lt;/i&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I can easily get horizontal spacing (see .home-flex) but I cant seem to get <code>justify-content: space-around;</code> or <code>justify-content: space-between;</code> to work vertically. Thanks</p>