Summary - Horizontal menu

Build a horizontal menu and toolbar with flexbox.

Horizontal menu summary

In this summary we combine the core Flexbox declarations into a single toolbar. First display: flex makes the container flexible. flex-direction: row lines the items up side by side.

justify-content: space-between spreads the logo on the left and the menu on the right with equal space in between. align-items: center centers them vertically. flex-wrap: wrap lets items wrap on narrow screens.

Spacing and alignment together

A toolbar aligns in two dimensions: justify-content for the main axis, align-items for the cross axis. In a horizontal container, justify-content: space-between spreads horizontally to both edges while align-items: center centers vertically.

Using the two together is the standard pattern for modern header bars; logo on the left, menu on the right, buttons neatly aligned.

Exercise Set up the horizontal menu

Add a .toolbar class selector. Inside, write display: flex and justify-content: space-between. The logo on the left and the menu on the right will then spread to both edges.

Show example solution

/* set up the horizontal menu */
.toolbar {
  display: flex;
  justify-content: space-between;
}

Exercise Set up and center the toolbar

Add another .toolbar class selector. This time write display: flex, justify-content: space-between and align-items: center inside. The toolbar will then spread to both edges and center vertically.

Show example solution

/* set up and center the toolbar */
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Test yourself

Which one lines items up side by side?
```
.toolbar {
  display: flex;
  /* ? */
}
```
- flex-direction: column
- flex-direction: row
- flex-wrap: nowrap
- align-items: stretch
Show answer

flex-direction: row — Correct. flex-direction: row lines items up side by side, left to right.
Match each property to its job

display: flex

Makes the container flexible
justify-content

Spreads on the main axis
align-items

Aligns on the cross axis
flex-wrap

Enables line wrapping

Next lesson: Flex-grow

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies