flexbox
align-items
Aligns flex or grid items along the cross axis of their container. It is the counterpart to justify-content and controls vertical alignment in a default row layout.
align-items: stretch | flex-start | flex-end | center | baseline | start | endCommon values
| Value | Effect |
|---|---|
| stretch | Default; items fill the container's cross size |
| flex-start | Aligns items to the start of the cross axis |
| center | Centers items along the cross axis |
| flex-end | Aligns items to the end of the cross axis |
| baseline | Aligns items along their text baseline |
Examples
.row { display: flex; align-items: center; }Vertically centers children in a row
.cards { display: flex; align-items: stretch; }All cards match the tallest sibling's height
.form { display: flex; align-items: baseline; }Aligns label and input on their text baselines
Gotcha
stretch has no effect if items have an explicit height set; use align-self on individual items to override.
Related properties
justify-content
Aligns flex or grid items along the main axis, distributing extra space between them. It has no effect if the items already fill the container.
flex-direction
Sets the main axis of a flex container, deciding whether items lay out horizontally or vertically. It also determines which direction items are reversed if needed.
gap
Shorthand for row-gap and column-gap, setting spacing between flex, grid, or multi-column items. Replaces margin hacks for evenly spacing children.
flex
Shorthand for flex-grow, flex-shrink, and flex-basis on a flex item. Controls how the item grows or shrinks to fill the flex container.