Master CSS Flexbox in 6 steps!

Responsive layouts made easy! Step-by-step tutorial to create beautiful designs quickly, with live codepen examples.

1. Flexbox Basics

💡 Tip:
Want to try these live? Edit “CodePen Section” below each code block to play along and see your changes in real-time!

Let’s start by making a flex container!
Add display: flex and see how the items line up in a row.

Try it out:

What’s happening?

• The container now puts its children in a row, side by side.

• The color scheme matches throughout the series for a beautiful feed!

2. Main Axis Alignment: justify-content

The justify-content property aligns items horizontally (the main axis). Try these CodePens showing the different options!

Variations:

• justify-content: flex-start (default)

• justify-content: center

• justify-content: space-between

• justify-content: space-around

• justify-content: space-evenly

What’s happening?

• Try replacing center with any value above to see different alignments!

3. Cross Axis Alignment: align-items

This properly controls how items are aligned vertically (the cross axis).

What’s happening?

• See how items line up at the bottom? Change to align-items: flex-start or center to see what happens!

4. Changing Direction & Wrapping

Use flex-direction to arrange items in a column or row. Add flex-wrap to wrap overflowing items.

What’s happening?

• flex-direction: column stacks items vertically.

• Adding flex-wrap: wrap lets items flow into a new row if there isn’t enough space.

5. Flex Grow & Flex Shrink

Use these properties to make items expand or shrink based on available space.

What’s happening?

• Items with higher flex-grow expand more if there’s space.

• Items with lower flex-shrink resist shrinking if the container is too small.

6. Individual Alignment: align-self

Want to override the alignment for just one item? Use align-self!

What’s happening?

• .align-self-start bumps one item to the top, .align-self-end to the bottom (when items are centered by default).

7. Conclusion

You’ve just learned all the key features of Flexbox with modern, consistent styling. Play with these examples, remix them, and you're well on your way to building responsive web layouts.

Next step:
Got tricky layouts? Look into CSS Grid for more advanced two-dimensional structures!