I was talking with a pal the other day and moaning about flexbox for the millionth time because I had momentarily forgotten the difference between the justify-content and align-items properties.
“How do I center an element horizontally with flex again?” I wondered. Well, that was when she gave me what I think is the best shorthand way of remembering how the two work together.
She said that justify-content positions elements across the horizontal axis because the word itself is longer than align-items. At first I thought this was a really silly idea but now this is how I remember it. I even used it five minutes ago when I needed to make these two quick demos:
See the Pen justify-content: center by Robin Rendle (@robinrendle) on CodePen.
See the Pen align-items: center by Robin Rendle (@robinrendle) on CodePen.
So, to summarize:
justify-content: longer word: horizontal alignmentalign-items: shorter word: vertical alignment
This had me thinking if there are there any other mnemonic devices or ways that to remember complex things in CSS? Are there any other tricks you’d recommend? It sort of reminds me of the way kids are taught to remember the names of planets with things like, “My Very Educated Mother Just Showed Us Nine” where the first letter in each word represents the first letter of each planet: Mercury, Venus, Earth, Mars, Jupiter, Saturn, Uranus and Neptune.
Personally I always remember it by thinking of how justified text affects the horizontal positioning.
Justify is something you usually do to text. Text is horizontal. Thats how i remember it.
Or justify-content is similar to text-align: justify (axis X), remains axis Y (align-items.)
The best way to remember this is to use flex values very often :-)
justify-content aligns according to the main axis, not necessarily horizontally. If you change flex-direction to row it will do vertical alignment.
And here’s the one that comes when you think you just said something clever :-)
You’re right Ken (and Chris, and Ajay ecc.)
Anyway, again with Chris, thinking about text is an easy way in a default environement.
I came here to say that, but you said it before and I’m happy to enforce that idea. So don’t stick with the idea that
justify-contentwill align the items over the x axis, because if we change the flex direction to column it’s gonna do the opposite thing.Hey Robin, thanks for sharing! As for me I just think that “justify” in Flexbox means the same as justifying the words in a word processor; then, “align” goes by itself for exclusion.
Bye!
CSS is Trouble (or TRBL) for things like padding: 1 2 3 4;
My guess is 90%+ of flexbox usage is the default
flex-direction: row;, but I suppose it’s worth noting that if you change that (flex-direction: column;),justify-contentandalign-itemsflip around. So it’s not so much “the horizontal axis” as it is “the main axis” (and secondary axis for vertical).The way to remember might still hold up:
Grid is kinda cool in that, even though it’s just as complicated or more, it’s always two dimensional so the same properties always do “the same thing”.
That was my concern as well, which lead me to:
align-itemsis on the cross axis whilejustify-contentis on the main axis.justify-contentdoesn’t align along horizontal. It aligns along theflex-direction(default: row).So when
flex-direction: columnis set,justify-contentaligns vertically.I might be an outlier, but I rely on the fact that there is no
justify-itemsnorjusitfy-selfin flex layouts. It’s justjustify-contentas a single property for aligning items on the main axis. It can’t be on the cross axis, because I know that I have more control on the cross axis (e.g., I can align flex rows as a whole and flex items individually).So, as long as you remember that alignment on the main axis in flex layouts is limited (you can’t align items individually, and the
flexproperty takes precedence), you’ll remember that the solejustify-contentproperty works on that axis.[A]lign/[A]cross (main axis)
well… I usually go, “cmd+T flexbox css-tricks” and look it up
Someone already mentioned “trouble” (TRBL). Another that I heard once upon a time that I use constantly is “LoVe/HAte” (LVHA) for remembering a:link, a:visited, a:hover, a:active.
This reminds me of this article https://css-tricks.com/remember-selectors-with-love-and-hate/
I memorize Michael Jackson = MJ = Main Axis -> justify-content.
I have always remembered the 4 values needed for margin / padding as TROUBLE (top, right, bottom, left).
Also in WebGL shader land, the way you apply matrix transformations to a model is TRASH in reverse (scale first, rotate second, translate last).
When trying to remember the order of the number in
marginorpaddingshorthand (as inmargin: 2rem 1rem 1rem 0) I always think of the mnemonic for the cardinal compass: Never Eat Shredded Wheat. The items come in the same order (N-E-S-W or top-right-bottom-left).I have a simpler solution :
1 – First think about “justify-content” as “justifying a text” : it’s made horizontally.
2 – Then, think about the opposite axe (vertically).
So, firstly, and assuming you’re using the flex-direction default value wich is “row”, you want to justify things regardint to this main axis : or left, or right, or center. All of this is horizontal. Then, secondly, you may want to align them vertically.
Of course, in the event that you’re working in column, you have to reverse the thing : the main axis is vertical ! ;)
When you have only two options and you mix them up, the best way is to remember the easier one. Only remember “justify-content” that acts like font justifying horizontally. So, align-items will be just opposite assuming the default flex-flow in action.
If you happen to change the flex-flow to column, remember that flex-flow has changed direction so justify-content will also change direction. Again, remembering only one.
Margin plays an amazing role on child elements when the parent is a flex container.
You can achieve both at the same time by applying margin auto to the child element regardless of flex-flow. It will be centered both vertically and horizontally. Margin on child element always ignores flex-flow.
Try margin-left: auto, and the element will be at the right most position and it’s similar for all the other directions if applied only on one direction.
Try margin: auto auto 0, and the element will be bottom centered.
My mnemonic for the planets is simply “jsun” (think of the male first name “Jason”). This only works if you know the first four stone planets Mercury, Venus, Earth and Mars up to the asteroid belt, what I presume. Then each letter stands for the gas planets
Jupiter, Saturn, Uranus and Neptune.