title: Why using flexbox in container can prevent extra space of inline-block
body: <p>When I use <code>inline-block</code>, I meet space problem. As many solutions propose <a href="https://css-tricks.com/fighting-the-space-between-inline-block-elements/" rel="nofollow">here</a> The solution that I liked best is using FlexBox. Just simple, we just add <code>display:flex</code> in container. As example below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.flexbox {
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
  }
     li {
    background: slategrey;
    display: inline-block;
    /* inline block hack for IE 6&amp;7 */
    zoom: 1;
    *display: inline;
    padding: 4px;
    color: white
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="flexbox"&gt;
    &lt;li&gt;one&lt;/li&gt;
    &lt;li&gt;two&lt;/li&gt;
    &lt;li&gt;three&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>My question is: Why FlexBox can prevent extra space of <code>inline-block</code>. (I know why extra space exist when using inline-block). I have read some documents about FlexBox but no document mentions clearly about relationship between flexbox and <code>inline-block</code></p>