CSS3 Flexbox spacing between items

38.6k views Asked by At

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:

enter image description here

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: enter image description here

However, when I try it myself, I of course get this: enter image description here

if I use space-around, I get this instead. Huge space. enter image description here

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?

3

There are 3 answers

3
Ryan Miller On BEST ANSWER

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!

0
Mohammed Moustafa On

.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>

0
neurodynamic On

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).