The Flexbox Layout (Flexible Box) module
Lesson Intro
You’ve heard of display: block.
You’ve heard of display: inline
You’ve heard of display: inline-block.
Now hear this.
The goals
-
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.
Today’s Challenge!
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.
Next: using flex-direction
, justify-content
, and 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!