Let's be friends

The Flexbox Layout (Flexible Box) module

Last updated: January 1, 2023

You’ve heard of display: block.

You’ve heard of display: inline

You’ve heard of display: inline-block.

Now hear this.

The goals

  1. 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!

Flexbox exercises

For some people, "Try it every way you can think of" is too abstract. Go through this series of follow-along style exercises that break it down further. You'll have flexbox down pat - in no time.
Let's be friends