Layout
align-items
align-items sets where items in a flexbox or grid line up along the cross axis (across the direction they run in). In a flexbox running across, that is the vertical alignment.
Syntax
normal | stretch | <baseline-position>
| [ <overflow-position>? <self-position> ] | anchor-centerPreview
Code
.box {
display: flex;
align-items: center;
}Controls
About
Values
normal: the initial value. In a flexbox it is the same asstretch.stretch: stretches items whose height isautoto the full height of the line. Items with a set height do not stretch.flex-start,flex-end: aligns items to the start or end of the cross axis (top or bottom when items run across). They swap withflex-wrap: wrap-reverse.center: aligns items in the middle.baseline(first baseline): lines up the baselines of the items' first lines. Handy for text of different sizes.last baseline: lines up the baselines of the last lines.start,end: aligns items to the end given by the text direction. They do not swap withwrap-reverse.self-start,self-end: aligns items to the end given by each item's own text direction.anchor-center: centers an element placed with anchor positioning (position-anchor) on its anchor. It does nothing for other items, so this preview does not change.
The preview on this page sets display: flex as a helper declaration. The items only have a minimum height, so stretch makes them fill the line and flex-start and the like show their different heights. The numbers sit in the vertical middle of each item, so baseline lines the numbers up.
To change the alignment of a single item, set align-self on that item.
safe and unsafe
Put safe before a position keyword and, when items overflow the line, they are aligned to start instead, so the overflow never hides on the side you cannot see (the top). unsafe keeps the requested position even when items overflow. With neither, current browsers behave like unsafe. The items in this preview never overflow, so neither keyword changes what you see.