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;


But they work inside grid on Chrome.

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.


What about like this?
Is that good?

.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