🎯 Challenge: Set flex-direction to "column" — use the dropdown!
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.
📦gap — space between each item.
✅ 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
gap — adds space between flex items
flex-wrap — lets items wrap to a new line when they run out of room
👉 Next lesson: CSS Grid — build a 2D layout with rows and columns!