title: What's the difference between display:inline-flex and display:flex?
body: <p>I am trying to vertically align elements within an ID wrapper. I gave the property <code>display:inline-flex;</code> to this ID as the ID wrapper is the flex container.</p>
  
  <p>But there is no difference in presentation. I expected that everything in the wrapper ID would be displayed <code>inline</code>. Why isn't it?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#wrapper {
      display: inline-flex;
      /*no difference to display:flex; */
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
      &lt;div id="wrapper"&gt;
          &lt;header&gt;header&lt;/header&gt;
          &lt;nav&gt;nav&lt;/nav&gt;
          &lt;aside&gt;aside&lt;/aside&gt;
          &lt;main&gt;main&lt;/main&gt;
          &lt;footer&gt;footer&lt;/footer&gt;
      &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>