Tech World Software SchoolTWSS
0x40Lesson 5 of 9

Arrange items with Flexbox

Line up items and control the space between them with a flexible layout.

15 min 5-question quiz 1 code exercise
By the end of this lesson you can
  • 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.

menu.css
1.menu {
2  display: flex;
3  align-items: center;
4  justify-content: space-between;
5  gap: 16px;
6}
Output
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.

Exercise 1

Line up the menu

+25 XP

Make .menu a flex container, align its items vertically in the center, and leave 16px between them.

  • Menu layout
styles.css
Loading editor…
Styled page preview

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…