title: vertical-align property not working in flexbox
body: <p>I want to display a calculation with exponents (and more). To set the elements in line i use flexbox. Within the flexbox element i want to make use of the <code>vertical-align</code> CSS property. But the <code>vertical-align</code> property doesn't work.</p>
  
  <p>I tested it with different approaches and in the end one solution worked. But then the <code>justify-content</code> property is not working anymore. in my attempt i used for the property: <code>flex</code> the webkit version: <code>-webkit-box.</code></p>
  
  <p>Here is the snipped in a fiddle if you want to test it: <a href="https://jsfiddle.net/oe3hxfma/" rel="nofollow noreferrer">https://jsfiddle.net/oe3hxfma/</a></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>.calculation {
    display: flex;
    justify-content: center;
    font-size: 1.3em;
  }
  
  .exponent {
    display: inline;
    vertical-align: super;
  }
  
  .calculationTwo {
    display: -webkit-box;
    justify-content: center;
    font-size: 1.3em;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="calculation"&gt;
    3
    &lt;div class="exponent"&gt;
      2
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="calculationTwo"&gt;
    3
    &lt;div class="exponent"&gt;
      2
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can i make use of the vertical-align when the parent elmenet is displayed as flexbox.</p>