Flexbox is an amazing improvement to css web page layout and design. Unfortunately, sometimes Flexbox Justify-Content Doesn’t Work – Space Between or Space Around. For example, several times I’ve created a flexbox area that contains boxes and I want them to be spaced evenly in the available space. But the spacing is not even. It contains more space on the ends. I spent hours trying to figure out why it would not work.
I use StudioPress themes and the Genesis framework. The Genesis themes have built in float-clearing css, and the code interferes with the Flexbox justify-content rule.
Note: This is not a knock against StudioPress themes. Many theme builders use this same code for float clearing.
The following is an example of the clearfix code found in StudioPress Genesis themes; it is the standard clearfix code:
The Problem
If the flex container has the clearfix method applied to it, then the flexbox justify-content rule won’t work. If you use justify-content: space-between; then you will get incorrect spacing. With the space-between setting, the outside boxes should have no space between the box and the container edge.
The Solution
Remove the clearfix css from the flexbox container.
The codepen below is set up with flexbox so that boxes are spaced evenly within the .flexbox container and justify-content is set to space-between. With that rule, the first and last box should butt up against the container. Instead, they have space. To fix this, change content: ” ” to content: none;
When you change it to content: none, you will see that the left and right boxes butt up against the container without any space.
See the Pen Fix Flexbox Justify-content: space-around or space-between by Pat Fortino (@pxforti) on CodePen.dark
Benedikt Gregor says
wow thanks, worked on an old project and this was the culprit
Pat Fortino says
That one took me several days to figure out. Not sure how I did. I spent a lot of time in the Chrome code inspector until I found the problem :)
Martrell D Leonard says
Thanks man!
freedman says
This is amazing!!!
Thank you for taking the time to share. It save me loads of work
Sam says
Thanks mate, had exactly this problem using Genesis. You saved me probably hours of digging!
Pat Fortino says
Glad I could help. It’s a frustrating problem.