Apply for the next session

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

  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!

Apply for the next session