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.
The post A Quick Way to Remember the Difference Between `justify-content` and `align-items` appeared first on CSS-Tricks.
from CSS-Tricks https://ift.tt/2EmdrT9
via IFTTT
No comments:
Post a Comment