🎯 Challenge: Set direction to "Column" — tap the button!
Step 1 of 4
📐 Flex Layout
In Lesson 7 you learned that every element is a box. Now let's arrange boxes side by side (or top to bottom) using Flexbox — the most powerful layout tool in CSS! 🚀
🧭flex-direction — which way do items go? Row (→) or Column (↓)?
🎯justify-content — how items are spaced along the main line.
↕️align-items — how items line up on the cross axis.
➡️Direction Arrow — watch the arrow show which way items flow!
✅ Flex Layout Mastered!
Awesome! You now know how to arrange elements with Flexbox — the building block of every real webpage layout!
📖 What you learned
display: flex — turns a container into a flex layout
flex-direction — row (side by side) or column (stacked)
justify-content — spaces items along the main axis
align-items — aligns items on the cross axis
Watch the arrow — it always points the flex direction!
👉 Next lesson: CSS Grid — build a 2D layout with rows and columns!