Workshop › Traffic light › Step 5 of 12

Stack them in the middle

What we are doing

The lamps sit at the top left of the body, touching. With flexbox the body lays them out: one under the other, spread evenly, centered.

```css
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
```

What it means

• display: flex lets the body arrange its children.
• flex-direction: column puts them one under another.
• justify-content: space-around shares the free height evenly around them.
• align-items: center centers them left to right.

Your turn

Add the four lines inside .light, under border-radius.

Skills: Styling with CSS

← Round lamps Red, yellow, green →

All steps

1. An empty box
2. Give the box a shape
3. Three lamps inside
4. Round lamps
5. Stack them in the middle
6. Red, yellow, green
7. Turn them off
8. A timeline for a lamp
9. Play the timeline
10. One after another
11. One setting for the speed
12. Build it yourself: a pole