CSS propertyFlexbox
align-items
Aligns items along the cross axis of a flex or grid container.
- Initial value
normal- Inherited
- No
- Animatable
- no
- Applies to
- all elements, the effect shows up in flex and grid containers
- JavaScript
element.style.alignItems = "center"
Example
#CSS
.profile {
display: flex;
align-items: center;
gap: 12px;
}Example HTML
<div class="profile stage">
<div class="box" style="border-radius: 999px">AC</div>
<div>
<strong>Anna Carter</strong><br>
<small>Level 7 · 1240 EXP</small>
</div>
</div>Preview
Definition and usage
#The align-items property positions all the container’s items on the cross axis, the one perpendicular to the main axis. With a row (flex-direction: row) that’s vertical alignment: to the top, to the bottom, to the center, or to the text baseline.
By default, flex items stretch (stretch) to the full height of the row. That’s why columns in a flex layout end up the same height with no extra tricks.
A single item can override this setting with its own align-self property.
Syntax
#Syntax
align-items: normal | stretch | flex-start | flex-end | center | baseline | start | end;Values
#- Items without a fixed height stretch to the full height of the container.
- Items line up at the start of the cross axis, which in a row is the top edge.
- Items line up at the end of the cross axis.
- Items line up in the center of the cross axis.
- Items align so the baselines of their text sit on the same line, even at different font sizes.
Values in practice
#stretch
Items without a fixed height stretch to the full height of the container.
.demo { align-items: stretch; }flex-start
Items line up at the start of the cross axis, which in a row is the top edge.
.demo { align-items: flex-start; }flex-end
Items line up at the end of the cross axis.
.demo { align-items: flex-end; }center
Items line up in the center of the cross axis.
.demo { align-items: center; }baseline
Items align so the baselines of their text sit on the same line, even at different font sizes.
.demo { align-items: baseline; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- If you want to align just one item, use
align-selfon that item. - With
flex-direction: columnthe cross axis is horizontal, soalign-itemsaligns items horizontally.
Related entries
#- justify-contentPositions items along the main axis of a flex or grid container.
- align-selfOverrides the cross-axis alignment of a single item.
- align-contentPositions entire lines of items along a container’s cross axis.
- flex-directionSets the direction of the main axis: flex items line up in a row or in a column.
Spotted a mistake or missing an example? Write to us.