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