Centering boxes in Flexbox

In my codepen here: Flexbox test
When you narrow the browser width, the text will appear in boxes. However, the boxes are flush left and I want them centered, with equal space left and right. How do I achieve that with Flexbox? Is something interfering with using justify-content: center; or align-content: center; ? Because neither seem to work, or I have used them incorrectly (they have been removed from this example).

Don’t try to mix floats with flex, as they are really incompatible.

1 Like

Finally found the link I was looking for (before I got sidetracked):

It mentions floats vs flex, too.

That should definitely help.

If CSS-Tricks is too easy, you can go for’s 2016 candidate recommendation:

Note that section 9 describes the flexbox layout algorithm.


Arrrrrrgh. Removing the float throws everything off. I need to relearn from scratch. Thanks for the heads-up. I’ll nail this!

1 Like

The CSSTricks article mentioned above should be enough, but this website is also really good.

This website has interactive demo of flexbox. If CSSTricks article is too difficult for you, then I suggest you to follow this website.

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