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: centerjustify-content: space-betweenjustify-content: space-aroundjustify-content: space-evenly
What’s happening?
- Try replacing
centerwith 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-startorcenterto 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: columnstacks items vertically.Adding
flex-wrap: wraplets 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-growexpand more if there’s space.Items with lower
flex-shrinkresist 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-startbumps one item to the top,.align-self-endto 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!