Flexbox basics
🏠The everyday picture
Books on a shelf. You decide whether they lean left, centre or right, how much space goes between them, and whether they stand in a row or are stacked in a pile.
📘What it really is
- Flexbox arranges children in one direction, a row or a column. Turn it on for a container:
nav ul {
display: flex;
gap: 1rem;
}
Now the list items sit in a row with 1rem between them.
- The main settings on the container:
flex-direction: row(default) orcolumn;justify-contentspreads items along the direction:flex-start,center,space-between;align-itemslines them up across it:centerlines up items of different heights in the middle;gapsets the space between items;-
flex-wrap: wraplets items move to a new line when there isn't room. -
Flexbox is the everyday tool for menus, buttons in a row, a logo on the left and links on the right, and centring things.
🖱️Try it
Make your nav list a row with display: flex, remove the bullets (list-style: none; padding: 0;), and add a
gap. Then make your <header> a flex container with justify-content: space-between and
align-items: center, with your name on the left and the nav on the right.
✅Quick check
You want a logo on the far left and a menu on the far right of the header. Which Flexbox setting?
Show the answer
justify-content: space-between on the header.
How do you centre something both ways with Flexbox?
Show the answer
On its container: display: flex; justify-content: center; align-items: center;.