Creating a 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?

If you’re trying to use columns, why not just use grid? :shifty:

I want to know how it would be done using flex. It can’t be impossible to do.

You might want to do a search on grid vs flex. The very first result (at least for me) tells you why you probably can’t use something like column-gap

I want to know what an alternative method would be of replicating the same thing.

Chrome doesn’t support these properties when they are used with flex, only grid.
column-gap: 20px;
grid-column-gap: 20px;

One of my attempts was adding a div tag between both divs then add a width to it to try and create separation between the left and right divs but that didn’t do anything.

OK, obviously you didn’t do a search like I suggested.

The reason why it doesn’t work with flex is because it’s a one dimensional construct - EITHER a row or a column, not both. Grid is two dimensional so it has the concept of both rows and columns at the same time.

Use the appropriate tool for the appropriate use

Chrome doesn’t support these properties when they are used with flex, only grid.
column-gap: 20px;
grid-column-gap: 20px;

Inside firefox they work perfectly fine when used with flex.

Support in Flex Layout / Support in Grid layout

Did you even look at the browser compatibility chart on that page you linked to?

It’s exactly what I said above, isn’t it?

Gap works in Grid in firefox / Chrome

Gap works in Flex in firefox, Not Chrome

My point is if it’s not compatible in the browsers, why are you trying to use it? No one approach is correct - use what works…

I’m trying to create a gap between 2 divs using flex.

If you want even space around the items then use space-around.

.container-top {
  display: flex;
  /*column-gap: 20px;
  grid-column-gap: 20px;*/
  justify-content: space-around;
  align-items: center;
  height: 310px;
  margin: 0 0 45px 0;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background: url("https://i.imgur.com/jEMIULl.jpg") no-repeat 0 0;
  background-size: cover;
}

That will create an automatically equal space without having to know the exact px it needs to be.

1 Like

How compatible is space-around? Like space-evenly which is not compatible with any IE/Edge implementations? (It’s not on the compatibility chart, hence why I’m asking…)

Space-around works in edge ok as far as I can see but not the newer space-evenly (which I believe has only been added only for grid (not flex) in edge which means you cannot use @supports to offer alternatives).

As far as flex and grid are concerned Edge is still a little bit buggy and needs to be checked regularly if support is critical. They (flex and grid) mostly work but you need to keep an eye on them regularly. IE11 has many bugs but flex can be made to work ok in most cases.

The space-evenly should be the best solution but would not work in in asasass’s demo above because the inner elements already have margins so the results are a little counter-intuitive,

1 Like

What if I wanted to set a specific/fixed width between both divs, then how would I do that?

Is this a good way of doing that, or no?
https://jsfiddle.net/Lz2b7a4k/3/

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

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

The problem is that with a small demo of fixed widths like yours you could simply give appropriate margins to do what you want.

So yes you could do what you suggest in this case but generally with flex you would want something more flexible :slight_smile:

Don’t get caught up asking what’s best but instead understand what the capabilities of each property are and then use them to your advantage.

2 Likes