Lesson 7: Flexbox Layout
For decades, laying out web pages was painful. Flexbox changed everything. It makes aligning and distributing elements in a row or column simple, flexible, and powerful.
Key Concepts
Flex Container
Add display: flex to a parent element to make it a flex container. All its direct children become flex items and line up in a row by default. That is all you need to start!
justify-content and align-items
justify-content controls alignment along the main axis (horizontal for rows): flex-start, center, flex-end, space-between, space-around. align-items controls the cross axis (vertical): center, flex-start, flex-end, stretch.
flex-direction and flex-wrap
flex-direction: column stacks items vertically instead of horizontally. flex-wrap: wrap lets items wrap to the next line instead of squeezing together. gap adds space between items.
🆕 Live Editor
Edit the code — the preview updates live!