Spacing between flexbox items

Question

This is what I want:

flex with spacing

But this is the closest I've got:

body{
    margin: 0;
    padding: 0;
    border: 1px solid red;
}

.flex{
  display: -ms-flexbox;    
  display: -webkit-box;    
  display: -webkit-flexbox; 
  display: -webkit-flex;
  display: flex;            
}    

.flex > *{ margin: 0 10px; }    
.flex > :first-child{ margin-left: 0; }
.flex > :last-child{ margin-right: 0; }

.flex.vertical > *{ margin: 10px 0; }    
.flex.vertical > :first-child{ margin-top: 0; }
.flex.vertical > :last-child{ margin-bottom: 0; }

.vertical{
      -webkit-box-orient: vertical;    
         -moz-box-orient: vertical;    
              box-orient: vertical;    
  -webkit-flex-direction: column;
     -moz-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;      
}

.box{
  background: #000;
  flex: auto;
  min-height: 100px;
}

<div class="flex vertical">    
  <div class="flex">
    <div class="box"> </div>    
    <div class="box"> </div>                
  </div>   
  <div class="flex">    
    <div class="box"> </div>    
    <div class="box"> </div>                
    <div class="box"> </div>              
  </div>   

  <div class="flex">
    <div class="box"> </div>    
    <div class="box"> </div>                
  </div>           
</div>

I'm applying a margin on flexbox items, then removing half of it from the first & last children.

The problem is that :first-child is not always the first visually, because I may alter the layout order using flexbox ordering utilities. For example:

.flex > *{
  -webkit-box-ordinal-group: 2;
     -moz-box-ordinal-group: 2;
             -ms-flex-order: 2;
              -webkit-order: 2;
                      order: 2;    
}

#important{
  -webkit-box-ordinal-group: 1;
     -moz-box-ordinal-group: 1;
             -ms-flex-order: 1;
              -webkit-order: 1;
                      order: 1;
}

body{
    margin: 0;
    padding: 0;
    border: 1px solid red;
}

.flex{
  display: -ms-flexbox;    
  display: -webkit-box;    
  display: -webkit-flexbox; 
  display: -webkit-flex;
  display: flex;            
}    

.flex > *{ margin: 0 10px; }    
.flex > :first-child{ margin-left: 0; }
.flex > :last-child{ margin-right: 0; }

.flex.vertical > *{ margin: 10px 0; }    
.flex.vertical > :first-child{ margin-top: 0; }
.flex.vertical > :last-child{ margin-bottom: 0; }

.vertical{
      -webkit-box-orient: vertical;    
         -moz-box-orient: vertical;    
              box-orient: vertical;    
  -webkit-flex-direction: column;
     -moz-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;      
}

.box{
  background: #000;
  flex: auto;
  min-height: 100px;
}

<div class="flex vertical">    
  <div class="flex">
    <div class="box"> </div>    
    <div class="box"> </div>                
  </div>   
  <div class="flex">    
    <div class="box"> </div>    
    <div class="box" id="important"> </div>                
    <div class="box"> </div>              
  </div>   

  <div class="flex">
    <div class="box"> </div>    
    <div class="box"> </div>                
  </div>           
</div>

Is there a way to take the visual order into account when applying the margin?

CSS Grid Layout solution: https://stackoverflow.com/a/48755146/3597276 — Michael Benjamin, Feb 12 '18 at 20:49

neurodynamic · Accepted Answer · 2021-05-11T16:06:53.940

50

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 the gap property, you can get what you want with just gap: 10px (or whatever size you want).

edited May 11 '21 at 16:06

answered Aug 10 '19 at 21:17

neurodynamic

4,294
3
28
39

2

The Safari bug is resolved and support was shipped with 14.1. Finally! :o) – agrm May 08 '21 at 19:45

agrm · Answer 2 · 2016-10-29T21:48:13.390

24

You can try setting the same margin for all the boxes, and then revert this on the container:

So replace this:

.flex > * { margin: 0 10px; }    
.flex > :first-child { margin-left: 0; }
.flex > :last-child { margin-right: 0; }

.flex.vertical > :first-child { margin-top: 0; }
.flex.vertical > :last-child { margin-bottom: 0; }

With this:

.flex.vertical { margin: -20px 0 0 -20px; }
.flex > * { margin: 0 0 0 20px; }
.flex.vertical > * { margin: 20px 0 0 0; }

edited Oct 29 '16 at 21:48

answered May 02 '14 at 17:13

agrm

3,735
4
26
36

3

..but then there is a margin on the right side of the last element: http://jsfiddle.net/kWkmx/ – Josh Crozier May 02 '14 at 17:14
Updated my answer. In the last suggestion margins are only added to the top and to the left. Then these are reverted with corresponding negative margins on the container. – agrm May 02 '14 at 17:18
5

Isn't that "cheating"? The question was for one flexbox, not creating multiple ones. The flexbox is supposed to be responsible for arranging items on a new column or row itself. On a dynamic website, you'd have to calculate how many go into one row or column first, before you could render the HTML using this approach. Imo it's not satisfying. – Zelphir Kaltstahl Dec 27 '15 at 16:25
But how do you avoid horizontal scrollbars for containers with overflow: auto? – jbyrd May 03 '19 at 14:34
@jbyrd I'm not sure why this would cause a horizontal scrollbar. Do you have images or fixed width contents in the inner boxes preventing them from shrinking or flexing. Do you have an example? – agrm May 19 '19 at 13:12

score 9 · Answer 3 · edited May 23 '17 at 12:34

While Rejoy answer works perfectly, it's not responsive-ready, because the rows are locked.

flex-flow is your new friend. However, flex is not without bugs. The negative margin trick we know from various grid framework does work, unless you are on IE, where the elements get wrapped too early because it uses content-box as box-size. But there is an easy workaround.

Working example: https://jsfiddle.net/ys7w1786/

.flex {
  display: flex;  
  flex-direction: row; /* let the content flow to the next row */
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  margin: -4px -4px; /* grid trick, has to match box margin */
}

The boxes come with flex-basis: auto, because of IE. But we can simply use width instead:

.box {
    flex: 0 0 auto; /* auto is important because of an IE bug with box-size */
    height: 100px;
    display: inline-block;
    background-color: black;
    margin: 4px; /* spacing between boxes, matches parent element */
}

.s1-2{
  width: calc(50% - 8px); 
}
.s1-4{
  width: calc(25% - 8px);
}

galki · Answer 4 · 2015-04-28T02:01:53.150

7

here is another way of getting the same thing.

.vertical > div{ margin-bottom: 10px; }
.vertical > div:last-child{ margin-bottom: 0; }
.box + .box{ margin-left: 10px; }

edited Apr 28 '15 at 02:01

answered Apr 23 '15 at 09:47

galki

8,149
7
50
62

1

Can you explain the benefits of this over @agrm's answer? With `div:not(:first-child)`, instead of `div + div`, it wouldn't matter whether they were within
elements, or anything else.

Michael Scheper

Apr 28 '15 at 01:19

score 7 · Answer 5 · answered Sep 20 '17 at 17:14

7

Another solid point for using Flex is that you can specify the strategy to use for the remaining space:

.container {
    justify-content: space-between;
}

answered Sep 20 '17 at 17:14

Pierre Lemée

342
3
2

Mark Conroy · Answer 6 · 2017-06-14T13:41:33.697

EDIT - I don't suggest using this approach, it's hackish. I'll leave it here for posterity.

What I did to approach this, since I wasn't sure how many elements I'd have within each flex space. For example, I am building a Drupal theme and have four regions that align side-by-side, but I want the full width to be taken up, even if there is content in only three of the regions.

Gave each region a padding of 10px
Set the background colour of each region to match the theme background colour - in my case white
Created a div inside each region (to create the illusion of a margin between them.

HTML looks like this:

<div class="flexy">
    <div class="region">
       <div class="region-inner">
       </div>
    </div>
</div>

CSS looks like this:

.flexy {
    display: flex;
    flex-wrap: wrap;
}

.flexy .region {
    box-sizing: border-box;
    flex-grow: 1;
    flex-basis: 0;
    padding: 10px;
}

This leaves me with a layout like so (ignore the ugliness, the colours are only to demonstrate):

There are some other classes added such as 'halves', 'thirds', and 'quarters' to help out making things responsive on smaller and/or larger screens.

but your content doesn't meet container borders – Undefitied Jun 29 '17 at 17:17 — Undefitied, Jun 29 '17 at 17:17
See the note at the top of my answer. – Mark Conroy Jul 03 '17 at 08:40 — Mark Conroy, Jul 03 '17 at 08:40

score 2 · Answer 7 · answered Nov 15 '16 at 04:54

2

The desired layout can be achieved using a wrapper div with negative margin

.flex-wrapper{
    margin: -20px;
}

Working code http://jsfiddle.net/8cju5jpd/

answered Nov 15 '16 at 04:54

Rejoy

327
3
9

This does not work as expected when using flex flow instead of manually defining the rows – dube Mar 18 '17 at 14:03

Mario Vázquez · Answer 8 · 2018-09-15T05:18:32.497

Trying to stick on your question:

Is there a way to take the visual order into account when applying the margin?

I would say no, the same way you cannot style an element based on the value of, let's say, its background color. To do so, you could write custom classes to set the flex order and then subclass based on them.

Please check out this interesting thread where I posted my solution on spacing: Better way to set distance between flexbox items

score 1 · Answer 9 · answered Oct 12 '19 at 04:53

1

is it bad to create an dummy div / View for spacing?

<Item style={{flex:1}} />
<View style={{width: 10}}
<Item style={{flex:1}} />

answered Oct 12 '19 at 04:53

eugene

39,839
68
255
489

It's not against the rules, but it's bad practice to use markup to define styling. Sometimes you need to do it. But there's CSS methods to achieving that and separate content from styling. – RockyK Jul 23 '21 at 19:37

Spacing between flexbox items

9 Answers9

EDIT - I don't suggest using this approach, it's hackish. I'll leave it here for posterity.

Linked