Think of a flex container as a tray holding several items. After you choose their direction with flex-direction, align-items decides where those items sit across the tray—not along it. That across-the-tray direction is called the cross axis. When the main axis runs left to right, the cross axis runs up and down. section 12.2 section 12.18
This is a container property: place it on the element with display: flex, not on each individual flex item. A handy memory trick is that justify-content handles the main axis, while align-items handles the cross axis. section 12.2 section 12.18
container {
display: flex;
align-items: stretch|flex-start|flex-end|center|baseline;
}
Start with a flex container, then pick one value for align-items. stretch is the default, so it does not need to be written unless you want to make the choice explicit. section 12.2
The available values give the items different places to land on the cross axis:
- stretch fills the container across the cross axis. This is the default. section 12.2
- flex-start places items at the beginning of the cross axis; flex-end puts them at its end. section 12.2
- center places items in the middle of the cross axis. section 12.2
- baseline lines items up along the flex container's baseline. section 12.2
Center a heading in the window
Turn a div into a flex container, give it the full browser-window height, and set both justify-content and align-items to center. The first property centers the heading in one direction; align-items centers it in the other, leaving the heading in the middle of the window. section 12.5 section 12.2
Keep a header’s contents vertically tidy
A header can hold a logo, navigation, and page title while using a horizontal flex layout. Setting align-items to center centers all of that content vertically within the header; div elements can then separate the left and right portions for horizontal alignment. section 20.14
The default stretch can be useful rather than surprising. In a layout with an article beside an aside, it makes the two flex items the same height, creating a full-height sidebar without a faux column. section 12.17
Try changing only align-items between stretch, flex-start, flex-end, center, and baseline. Keep the same container and items while you watch the cross-axis arrangement change—that is the quickest way to make the axes feel less slippery. section 12.2
