Ch 3 · Layout with Flexbox · CSS
Topic 3 of 3 in CSS — Make It Beautiful — 3 lessons.
Rows with Flexbox
Flexbox arranges items in a row or column. Set display: flex on a container, then space items with justify-content and gap.
Aligning Items
A flex container has two directions. The main axis runs the way the items flow, which is left to right in a row. The cross axis runs across it, top to bottom in a row. Flexbox gives you one property for each.
Wrapping & Growing
By default, flex items squeeze onto one line, however many there are. On a narrow phone screen that makes them uncomfortably thin. flex-wrap lets items move onto a new line when they run out of room, and the flex property controls how they share the space.