title: Flexbox - dividers with vertically centered content
body: <p>So I have a container which I want to evenly space things out left to right and vertically center them. I would also like to add vertical dividers to between the content that would stretch if content gets longer.</p>
  
  <p>This divider works just fine if content is not vertically centered:</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>section {
    display: flex;
    flex-direction: row;
    flex: 1;
    margin: 0 -8px;
  }
  
  section &gt; * {
    margin: 0 8px;
  }
  
  .divider {
    width: 2px;
    margin: 6px 0;
    background: blue;
  }
  
  .item {
    flex: 1;
    background: orange;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section&gt;
    &lt;div class="item"&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="divider"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;
      &lt;p&gt;Potato&lt;/p&gt;
    &lt;/div&gt;    
    &lt;div class="divider"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;
      &lt;p&gt;Markup&lt;/p&gt;
    &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But when I add <code>align-items: center;</code>, the dividers disappear. </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>section {
    display: flex;
    flex-direction: row;
    flex: 1;
    margin: 0 -8px;
    align-items: center;
  }
  
  section &gt; * {
    margin: 0 8px;
  }
  
  .divider {
    width: 2px;
    margin: 6px 0;
    background: blue;
  }
  
  .item {
    flex: 1;
    background: orange;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section&gt;
    &lt;div class="item"&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="divider"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;
      &lt;p&gt;Potato&lt;/p&gt;
    &lt;/div&gt;    
    &lt;div class="divider"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;
      &lt;p&gt;Markup&lt;/p&gt;
    &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How do I get the dividers back and have my content centered vertically?</p>