Creating a column gap using flex

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?

1 Like

The gutter stuff will come to CSS flex eventually, it’s a shame it isn’t there at the minute because this is such a common need.

You can do positive margin on the flex items, negative margin on the container.

.container {
  margin: 0 -10px
  display: flex;
}

.item {
  margin: 0 10px;
}

Or you can use margin on the items then say no left margin on the first child and no right margin on the last child.

2 Likes

What about like this?
Is that good?
https://jsfiddle.net/Lz2b7a4k/3/

.container-top {
  display: flex;
  justify-content: center;
  align-items: center;
}

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

Yes, that’s how you’d normally add spacing to anything, just margin or padding - if you’re fine with that then that’s great, you don’t need to faff around with making it work like grid gaps