Flexbox Justify-Content Doesn’t Work – Space Between or Space Around

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 StudeoPress 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 StudeoPress themes. Many theme builders use this same code for float clearing.

The following is an example of the clearfix code found in StudeoPress 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 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