title: webkit box vs boxflex
body: <p>I recently ran across a tutorial where the instructor used this syntax:</p>
  
  <pre><code>display: -webkit-box;
  </code></pre>
  
  <p><a href="http://www.youtube.com/watch?v=B-MNkBh7F2A" rel="noreferrer">http://www.youtube.com/watch?v=B-MNkBh7F2A</a> @ 2:30 (created aug 2012)</p>
  
  <p>I hadn't seen this before and began trying to find some info on it.  It seems CSS3 has something called flexbox.  But I couldn't find references the above syntax.</p>
  
  <p>In this article <a href="http://coding.smashingmagazine.com/2011/09/19/css3-flexible-box-layout-explained/" rel="noreferrer">http://coding.smashingmagazine.com/2011/09/19/css3-flexible-box-layout-explained/</a>, written a year before the above tutorial (sept 2011), they use this syntax:</p>
  
  <pre><code>display: box;
  </code></pre>
  
  <p>and mentioned box will be replaced with flexbox.</p>
  
  <p>I'm still not sure what the benefit of flexbox or box is.  I don't see people using it.  Can someone give a basic summary of it?</p>
  
  <p>Also, why does the tutorial use -webkit-box?  Is <em>box</em> webkit specific? Why didn't he use </p>
  
  <p>display: box;</p>
  
  <p>Does -webkit-box mean it only works in Safari and Chrome?</p>
  
  <p>If it is cross browser compatible, which browsers and versions does it work with?</p>
  
  <p><em>box</em> (non webkit) seems to be cross browser compatible.</p>