Struggling with flex justify-content

I have the following codepen

I want to do away with the margin on col2 using flex properties instead… I have tried adding justify-content: space-between; to the column element but I don’t get any space between my columns.

Where have I goofed?

The problem is that because you have flex-grow set to a value then there will be no space between. e.g. flex:1 0 25% will make the element at least 25% (space permitting) but if nothing else is in the way it will stretch to the full 100%.

If you use flex:0 0 25%; then the element will stay at 25% unless content forces it wider (unlike width).

The easiest way to have a margin is as you did it with a margin on the middle column. If you want it automatic then you can apply margins to all columns but you would need to offset them a little first and makes it a little harder to understand.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.