Understand the idea

Flexbox distributes items along a main axis and aligns them on a cross axis. It is useful for toolbars, navigation and small groups of related controls.

display: flex turns the direct children into flex items. gap adds space between them. flex-wrap allows extra rows when space runs out. justify-content operates along the main axis; align-items operates across it. Changing flex-direction changes those axes.

Read the example

This is a CSS fragment. Put it in a stylesheet and supply the matching HTML described in the exercise.

CSS · EXAMPLE
.navigation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.navigation a { padding: 8px 12px; }

A small mistake, explained

What goes wrong

Putting display: flex on each child does not arrange the children together. Their parent controls that layout.

How to fix it. Apply flex to the common parent. If a child refuses to shrink, examine its minimum size and long unbreakable content.

Try it yourself

Create three navigation links inside one nav element with class="navigation". Resize the window and watch them wrap.

Further reading

W3C — CSS Flexible Box Layout (new tab)

Original explanation and example prepared for HTML code FYI with AI assistance. Test the code in your own context. How these guides are made.