CSS3 Flexbox spacing between items

Question

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.

For example, one of the most cited tutorials is this one at CSS Tricks.

It's very good and has been helpful, diagrams like this have thrown me off:

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.

Correct, or am I missing something important here?

Because what i need to create is this, a lot like the "center" demo above:

However, when I try it myself, I of course get this:

if I use space-around, I get this instead. Huge space.

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.

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.

Am I missing something obvious here?

Answer 1

Nope - you're not missing anything. Flexbox is terrific for ordering elements and defining the general alignment of those elements along either the main or cross axes, but doesn't speak directly to individual item spacing. If you take a look at this Codepen used in the Flexbox article, you'll notice they use:

margin-top: 10px

to define element spacing. Hope this helps!

Answer 2

.rope {
  width: 393px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  background-color: aquamarine;
}
.box {
  height: 100px;
  width: 100px;
  margin: 15px;
  background: red;
}

<div class='container'>
  <div class='rope'>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

Answer 3

The CSS spec has recently been updated to apply gap properties to flexbox elements in addition to CSS grid elements. This feature is supported on the latest versions of all major browsers. With gap properties, you can get what you want with something like column-gap: 10px (or whatever size you want).