Arrange items with Flexbox
Line up items and control the space between them with a flexible layout.
- Create a flex container
- Choose a main axis direction
- Align items and add gaps
Flexbox lays out items along one main axis. Set display: flex on a container, then control direction, alignment and spacing. It works well for a row of navigation links, a toolbar or a group of cards.
1.menu {
2 display: flex;
3 align-items: center;
4 justify-content: space-between;
5 gap: 16px;
6}Items line up in a row with space between them
justify-content distributes items along the main axis. align-items lines them up across the other axis. The gap property adds consistent space between items without needing margins on each child.
Key takeaways
Flexbox is useful for one-dimensional layouts.
The container controls how its children line up.
Gap adds space between items.
Lesson quiz
5 questions · pass with 4 correct · up to 50 XP
Passing this quiz completes the lesson and keeps your streak going. Questions you miss come back in review sessions later.
Practice: write CSS
Style the sample page, see your changes in the sandboxed preview, and run checks against the computed styles.
Line up the menu
Make .menu a flex container, align its items vertically in the center, and leave 16px between them.
- Menu layout
Your CSS is applied to a sample page in a sandboxed preview. Tests check computed styles.
Questions about this lesson
Stuck? Ask. Figured something out? Share it. Explaining is one of the best ways to learn.
Loading posts…