Flexbox layouts

Put things in their place

Lesson 7 of 20 · 8 min · Module 3: Layouts that adapt

Flexbox makes it easy to arrange items in a row or column and distribute space between them.

Free. No installation: you write and run the code in your browser, and it is checked automatically.

By the end, you’ll be able to…

Make a parent a flex container
Set spacing between items
Distinguish main-axis and cross-axis alignment

The idea

Give a parent display: flex. Use gap for space between children, justify-content for horizontal placement, and align-items for vertical alignment in a row.

.row {
  display: flex;
  gap: 16px;
  align-items: center;
}

01The parent controls its children

display: flex affects the layout of the container’s direct children. With the default row direction, the main axis is horizontal in an ordinary left-to-right writing mode.

02Use the right alignment property

justify-content distributes space along the main axis. align-items aligns items across the cross axis. gap adds consistent space between neighboring items without outer margins.

Your turn

Make .skills a flex container with gap: 16px and justify-content: center. Keep the three skill elements.

What the checks look for

Skills use a flex layout
Items have a 16px gap
Skills are centered
All three skills are present

Try it in the editor →

Take this with you

Let the layout container own the relationship between its children.