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