Do you often find yourself looking up a Flexbox cheat sheet? Wish you could just commit all those properties to memory and be done with it? Here’s how I memorized them.
If you’ve worked with flexbox much, you might already have this one committed to memory. The
flex property is itself shorthand for three other properties:
flex-basis. But most of the time, the shorthand is all you need (and is even preferable).
If you’re not familiar with this shorthand yet, learn it first. Learn only it. Don’t worry about any of the rest until you get this down.
Justify = horizontal
In Microsoft Word, if you “justify” text, you control how the text is spaced out horizontally. It spaces to be flush against the left and right sides.
In the same way,
justify-content is used on a flex container to control how its flex items are spaced horizontally.
Align = vertical
You know there’s a
vertical-align property, right? Maybe it didn’t ever do what you expected it do, but you know it’s there. The same way, the
align-* properties control vertical alignment.
align-contentcontrols how the rows of flex items align vertically within the flex container. (This generally only applies when you have flex-wrap enabled.)
align-itemscontrols how the flex items align themselves vertically within each row.
align-selfon a single flex item controls how that item is aligned vertically within a row, overriding its parent’s
If you can remember this rule, you’ll have a lot more of flexbox ready from memory. Note that these swap if you change the flex direction to “column” or “column reverse”. Technically speaking,
justify-content spaces along the main axis, and
align-* properties space along the cross axis. But learn the default behavior, as it is the most common scenario; and know that rotating these axes changes it.
As a bonus, these properties also apply to CSS Grid as well. Grid also brings in a
justify-self property to fill out the set. These work much like their
align-* counterparts, but on the horizontal plane.