Creating a gap using flex

Question

There’s no browser support for these properties inside flex on Chrome.

column-gap: 20px;
grid-column-gap: 20px;

Flex

https://jsfiddle.net/80s1p4az/2/

But they work inside grid on Chrome.

https://jsfiddle.net/80s1p4az/3/

How would I create a column gap using flex?

I want to know what an alternative method would be of replicating the same thing so it would work using flex.

Is there any possible way to do this?

You could give the child elements the same padding/margin? – wiesson Aug 13 '19 at 17:21 — wiesson, Aug 13 '19 at 17:21
related: https://stackoverflow.com/q/56977608/3597276 – Michael Benjamin Aug 13 '19 at 17:30 — Michael Benjamin, Aug 13 '19 at 17:30

score 5 · Answer 1 · edited Apr 11 '23 at 18:29

5

Since recently (jan 2021), this is in fact possible in Chrome! It was already possible in Firefox for some time, but now it is supported by FF, Edge, Chrome, and Safari since v14.

For currently supported browsers see Caniuse

Example code:

.flexbox {
    display: flex;
    flex-wrap: wrap;
    width: 300px;
    gap: 20px 5px;
 }

This is shorthand for

row-gap: 20px;
column-gap: 5px;

And will result in a 20px gap between rows, and 5px gap between columns.

You can use:

pixel values
percentage values
calc()

And for more info, see off course the docs of MDN!

edited Apr 11 '23 at 18:29

Andrew

3,825
4
30
44

answered Jan 27 '21 at 13:44

Anwi77

109
2
4

It doesn't work on my Windows 10 + Chrome 90.0.4430; please check this http://jsfiddle.net/ugpoj50m/ and the screenshot of what I see on my display https://i2.paste.pics/6003003db81db54de1bc9a4010260e80.png – Marco Panichi May 30 '21 at 06:40
@MarcoPanichi i I think it does what it intends to do, and your screenshot is correct. What is it that you did not expect? To explain: The width of the element (50px) + the width of the gap (20px) leaves room for 10 leftover pixels after three elements. If you want to fill the full container, you can set flex-grow to 1. However; The remaining 4th element will then also grow bigger than 50px. You might wanna use css grid in cases like this. I added both to a fiddle, using your code. I hope I understood you correctly! https://codepen.io/ankedsgn/pen/BaWOJZK – Anwi77 Jun 10 '21 at 12:26

score 2 · Accepted Answer · answered Aug 13 '19 at 17:39

Flex doesn't work that way. If you want a gap in flex, you only have 2 alternative options:

1. Relative Gap

CSS3 offers devs 3 values for justify-content property that help you to align the objects and creating gap between them relatively:

space-around: Inserting gaps between its childern and 2 sides of them.
space-between: Inserting only gaps between its childern.
space-evenly: Similar to space-around but provides equal instead of half-sized space on the edges.

.container {
    display: flex;
    justify-content: /* put it in here */;
}

You cannot fix gaps, so it may break you layout. Especially in the case where your container has loose width or height.

2. Fixed Gap

Using margin property to fix gaps between container's children. Sometime easy, but sometime... it could be quite annoying.

.container {
    display: flex;
}

.container > * {
    margin: /* top right bottom left | top-bottom right-left | etc. */;
}

For complex task, selector nth-child is required.
It also requires more calculating.

score 1 · Answer 3 · answered Aug 13 '19 at 17:22

What I have done before is use margin on the children, then negative margin on the parent:

.container-top {
    margin: 0 -20px;
}

.container-top > div {
    margin: 0 20px;
}

JSfiddle

Note: this is a hack. This may extends beyond the width of .container-top.

score -1 · Answer 4 · answered Aug 13 '19 at 17:21

-1

.container-top {
 display: flex;
 justify-content: space-around;
}

justify-content: space-around / space-between will make space between the flex-boxes.

answered Aug 13 '19 at 17:21

Umapathi

116
10

Creating a gap using flex

4 Answers4

1. Relative Gap

2. Fixed Gap

Linked

Related