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):
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
It mentions floats vs flex, too.
That should definitely help.
EDIT:
If CSS-Tricks is too easy, you can go for w3.org’s 2016 candidate recommendation:
https://www.w3.org/TR/css-flexbox-1/
Note that section 9 describes the flexbox layout algorithm.
3 Likes
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.
http://flexboxin5.com/
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.