align-items
Aligns items across the main axis — vertically in a row.
Syntax
align-items: value;Values
| Parameter | Type | Description |
|---|---|---|
| stretch | keyword | Stretched to the full height of the line (the default). |
| center | keyword | In the middle. |
| flex-start | keyword | At the top (in a row). |
| flex-end | keyword | At the bottom (in a row). |
| baseline | keyword | Along the baseline of the text. |
Examples
Different alignment:
<style>
.row { display: flex; gap: 6px; height: 80px; background: whitesmoke; margin-bottom: 6px; }
.row div { padding: 6px; background: plum; }
</style>
<div class="row"><div>stretch</div><div>default</div></div>
<div class="row" style="align-items: center;"><div>center</div><div>center</div></div>
<div class="row" style="align-items: flex-end;"><div>end</div><div>end</div></div>Centering in both directions:
<div style="display: flex; align-items: center; justify-content: center; height: 100px; background: honeydew;">
Exactly in the center
</div>Notes
In a column (flex-direction: column) align-items works horizontally. For a single item, use align-self.
See also
- justify-content — Distributes items along the main axis of a flex or grid container.
- align-self — Aligns one item across the main axis, overriding the container's `align-items`.
- place-items — Sets `align-items` and `justify-items` at once.
Related recipes
In the tutorial
- Flexbox — Laying elements out in a row or a column with flexbox — axes, direction, gaps, alignment and wrapping.