Align-items
Learn cross axis alignment with align-items.
What is align-items?
align-items aligns flex items along the cross axis. In a horizontal container the main axis is horizontal and the cross axis is vertical; so align-items aligns items vertically.
You use this declaration to align buttons of different heights from the top, bottom or middle. Common values: stretch, center, flex-start and flex-end.
The stretch value
stretch stretches items along the cross axis so they fill the container's length. In a row container with three cards of different heights, align-items: stretch raises all of them to the tallest card's height.
This is ideal for tidy card rows. If the items have their own height declaration, stretch has no effect.
flex-start, flex-end, center
flex-start packs items to the start of the cross axis (top in a horizontal container); flex-end packs them to the end (bottom). If you want toolbar buttons aligned to the bottom, write align-items: flex-end.
center centers items vertically. These three values decide the vertical alignment when the container is tall; on a short container their visual effect is smaller and the choice matters less.
Exercise Center the toolbar vertically
Add a .toolbar class selector. Inside, write display: flex and align-items: center. Buttons of different heights will then be centered vertically.
Show example solution
/* center the toolbar vertically */
.toolbar {
display: flex;
align-items: center;
}Test yourself
-
What does align-items align?
.toolbar { display: flex; align-items: center; }- Only the text
- Along the main axis
- To the page corner
- Along the cross axis
Show answer
Along the cross axis — Correct. align-items aligns along the cross axis; in a horizontal container that means vertical alignment.
-
Center the buttons vertically
.toolbar { display: flex; align-items: ____; }Show answer
.toolbar { display: flex; align-items: center; } -
Match the align-items values
- stretch
- Stretches items
- center
- Centers vertically
- flex-start
- Packs to the top
- flex-end
- Packs to the bottom