title: Best practices for vertically aligning flex items
body: <p>I'm curious to discover the best way of spacing out flex items vertically inside a div. I want the  tag to have more space between its siblings, hence why I've added a flex-grow of 3. But the text inside the flex items isn't vertically aligning in the centre.</p>
  
  <p>Why aren't they vertically aligning in the center? And is there a better way of spacing these out vertically anyway?</p>
  
  <p>Curious to know the best practices from everyone, even if it's a different way.</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>#test {
    display: flex;
    padding: 20px;
    background: lightgreen;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    height: 200px;
  }
  a {
    flex-grow: 3;
    background: red;
    justify-content: center;
    align-items: center;
  }
  span {
    flex-grow: 1;
    background: pink;
    justify-content: center;
    align-items: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id='test'&gt;
    &lt;span&gt;stuff&lt;/span&gt;
    &lt;span&gt;more stuff...&lt;/span&gt;
    &lt;a href='#'&gt;link&lt;/a&gt;
    &lt;span&gt;even more stuff&lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>