title: Why is width handled differently in flexbox?
body: <p>I've been playing around with <code>display:flex</code> lately as I see it becoming more trending. In a quick test, using flex and non-flex CSS approaches, I realized, my widths, and margins are always respected when using flex. Is this a good approach considering that I will most likely need a gutter between elements anyway? Moreover, where is the margin between spans coming from? This is what I mean:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="box"&gt;
      &lt;span class="inner-box"&gt;This gives me a 30px X 60px&lt;/span&gt;
      &lt;span class="inner-box"&gt;This gives me a 30px X 60px&lt;/span&gt;
      &lt;span class="inner-box"&gt;This gives me a 30px X 60px&lt;/span&gt;
    &lt;/div&gt;  
    &lt;div class="box2"&gt;
      &lt;span class="inner-box"&gt;This gives me a width larger than the specified 30px&lt;/span&gt;
      &lt;span class="inner-box"&gt;This gives me a width larger than the specified 30px&lt;/span&gt;
      &lt;span class="inner-box"&gt;This gives me a width larger than the specified 30px&lt;/span&gt;
    &lt;/div&gt;  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.box{
    background: orange;
    display:flex;
    flex-direction:row-reverse;
    padding:0 10px;
  }
  
  .box2{
    background: green;
    text-align:right;
    padding:0 10px;
  }
  
  .inner-box{
    width:30px;
    background:#fff;
    margin:0 0px;
  }
  </code></pre>
  
  <p>Notice the widths at runtime
  <a href="https://i.stack.imgur.com/sEnxN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sEnxN.png" alt="Flexbox"></a></p>
  
  <p><a href="https://i.stack.imgur.com/h4foK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/h4foK.png" alt="Non-flexbox"></a></p>
  
  <p><a href="http://codepen.io/anon/pen/pgRNYX" rel="nofollow noreferrer"><strong>DEMO</strong></a></p>