Contents
Links
A Complete Guide to Flexbox | CSS-Tricks
This page is a classic! I’ve referenced it for years. This article probably bought Chris Coyier a house.
Basic concepts of flexbox - CSS: Cascading Style Sheets | MDN
Can’t go wrong.
Lil’ game.
*Flexbox,* short for flexible boxes—which folks (and I) will often just shorten all the way to *flex—*is a relatively recent addition to CSS. (Is 2017 still recent? It feels like a lifetime ago.) Flex was created to facilitate and allow CSS layouts that the box model, floats and position either made difficult or even impossible. It is a display property.
And let me tell you—being a web designer was a whole lot harder before flex came on the scene. (Notice that we haven’t yet talked about vertical centering, for instance. You don’t want to know.) Flex encapsulates a lot of decent Design ideas in its system.
Flexbox is a one-dimensional layout system—meaning it is focused on arranging items either horizontally in rows, or vertically in columns.
I borrowed this, it’s alright.
These are called the axes, and the one running in the direction of your flex items is your main axis. Perpendicular to this is your cross axis.
In both directions*,* flex also lets us position elements towards the start or the end of the axis:
This is from the masterpiece CSS Tricks article.
Like a lot of CSS, flex has shorthand properties. But I would avoid them—the system is hard enough to parse, and we aren’t being charged by the CSS line. This will be true when we get to grid as well—often being a little bit more verbose in your code will make things easier to understand, especially starting out.