CSS: layout and boxes
Every element is a box. You can set width, height, margin (space outside), and padding (space inside). display: flex; on a parent arranges children in a row or column. Use class and id to target specific elements.
Appy Says…
Getting elements to sit side by side, centre a div, make a navigation bar — these are the classic CSS puzzles. Flexbox solves all of them. It's the single most useful CSS feature for modern layout.
What is CSS Flexbox?
Flexbox is a CSS layout mode that arranges children of a container along one axis (row or column). The parent is the flex container; children become flex items that can grow, shrink, and align automatically.
- •
display: flex— turn on flexbox for a container - •
flex-direction: row | column— axis direction (row = horizontal, default) - •
justify-content— alignment along the main axis:flex-start | center | space-between | space-around - •
align-items— alignment on the cross axis:stretch | center | flex-start | flex-end - •
gap: 16px— space between flex items (modern, cleaner than margins) - •
flex: 1on a child — take up all available remaining space - •
flex-wrap: wrap— allow items to wrap to the next line
Think of it like arranging items on a shelf
Flexbox is like a magical shelf where you tell it how to arrange items — left-aligned, centred, spaced evenly — and it handles all the maths. You say 'space these three items evenly' and they just are, regardless of screen width.
How It Works
- •1. Add
display: flexto the parent container - •2. Children automatically lay out in a row by default
- •3.
justify-content: space-betweenpushes first item to left, last to right, rest evenly spaced - •4.
align-items: centervertically centres all children - •5.
flex: 1on a child makes it expand to fill remaining space - •6. Perfect centering:
display: flex; justify-content: center; align-items: center;
Real-World Examples
- •Navigation bar:
display: flex; justify-content: space-between; align-items: center; - •Card grid:
display: flex; flex-wrap: wrap; gap: 16px; - •Button with icon and label side by side:
display: flex; align-items: center; gap: 8px; - •Full-height sidebar layout: parent
display: flex, sidebar fixed width, mainflex: 1
Key Facts
- •Flexbox is supported in 99%+ of browsers — safe to use everywhere
- •Flexbox is one-dimensional (one axis at a time); CSS Grid is two-dimensional
- •The visual order of flex items can differ from DOM order via
orderproperty - •Flexbox finally solved the 'how to vertically centre a div' problem that plagued CSS for 20 years
Watch Out!
justify-content works on the main axis (direction of flex-direction). align-items works on the cross axis. If you change flex-direction: column, they swap roles. This confuses many beginners.
Remember
justify-content = main axis alignment. align-items = cross axis alignment. display: flex; justify-content: center; align-items: center; centres anything.
What You Learned
- •Flexbox:
display: flexon parent, then justify/align children along axes - •
gapfor spacing,flex: 1to fill space,flex-wrapfor responsive rows - •Unlocks: navbars, card layouts, centring elements, sidebar layouts
Key Facts
- →Flexbox is supported in 99%+ of browsers — safe to use everywhere
- →Flexbox is one-dimensional (one axis at a time); CSS Grid is two-dimensional
- →The visual order of flex items can differ from DOM order via
orderproperty - →Flexbox finally solved the 'how to vertically centre a div' problem that plagued CSS for 20 years
Real-World Examples
Remember
justify-content = main axis alignment. align-items = cross axis alignment. display: flex; justify-content: center; align-items: center; centres anything.
Quick Quiz
What does padding do?