The Flexbox Layout (Flexible Box) module
You’ve heard of display: block.
You’ve heard of display: inline
You’ve heard of display: inline-block.
Now hear this.
Get an overview of how you can align things with flexbox!
It’s fun! You’ll like it. Get some practice! Then try it out in your own projects.
First: make a CodePen or – use whatever you want. Create a parent element with 4 child elements of some sort. Either with padding or width and height, make each of those unique sizes (by way of their content) / and give them unique colors so that you can tell them apart.
align-items: organize the flex-items in every combination you can think of. Take a screenshot of each and share it with the team. How many variations can you find?
(And don’t forget, you’ll need to set
display: flex; on the parent to make these properties come alive!)
Flex it up!