title: CSS3 Flexbox spacing between items
body: <p>Being somewhat new to Flexbox (although experienced in CSS), it seems to me that one thing conveniently "glossed over" by most tutorials I've read is the spacing between flex items.</p>
  
  <p>For example, one of the most cited tutorials is <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" rel="noreferrer">this one at CSS Tricks</a>.</p>
  
  <p>It's very good and has been helpful,  diagrams like this have thrown me off:</p>
  
  <p><img src="https://i.stack.imgur.com/Kz3gQ.png" alt="enter image description here"></p>
  
  <p>Notice the spaces between the flex items.  Although not mentioned anywhere, nor in the sample code, it would seem the only way to get the spaces is with css margins.</p>
  
  <p>Correct, or am I missing something important here?</p>
  
  <p>Because what i need to create is this, a lot like the "center" demo above:
  <img src="https://i.stack.imgur.com/oliuy.png" alt="enter image description here"></p>
  
  <p>However, when I try it myself, I of course get this:
  <img src="https://i.stack.imgur.com/8oJ6A.png" alt="enter image description here"></p>
  
  <p>if I use space-around, I get this instead.  Huge space.
  <img src="https://i.stack.imgur.com/jayB6.png" alt="enter image description here"></p>
  
  <p>Therefore it seems I need to add margin-right to the first 2 boxes to get 3 centered boxes with a small gap between them.</p>
  
  <p>Is this simply a bad use case for Flexbox?  Because I see little advantage creating my 3 boxes with Flexbox over using simple margins and centering.  </p>
  
  <p>Am I missing something obvious here?</p>