There’s no browser support for these properties inside flex on Chrome.
column-gap: 20px;
grid-column-gap: 20px;
Flex
But they work inside grid on Chrome.
How would I create a column gap using flex?
If you’re trying to use columns, why not just use grid? 
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
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.
2 Likes
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,
2 Likes
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?
.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 
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.
3 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.