Answers and explanations · Arrange a flexible navigation row

Compare the reasoning, not just the final appearance. Other correct solutions can satisfy the same requirements.

1. Axes

With column, the main axis runs vertically, so justify-content distributes along that vertical axis. align-items operates across the horizontal cross axis. Available free space still matters; a container that is only as tall as its content may show little distribution.

2. Wrap

.nav-list { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }

Keep text at a comfortable size. A navigation label may itself wrap inside its link when necessary. Test both the outer header-row wrapping and the inner list wrapping, because they are separate containers.

3. Container and direct children

display: flex on an li arranges that li’s children; it does not arrange sibling li elements. Put it on ul.nav-list to make the list items flex items. This parent/direct-child relationship explains many layout surprises.

Return to practice · Return to lesson