HTML Guides for align-items

The align-items property controls how flex or grid items are aligned along the cross axis of their container. While many CSS properties accept auto as a value, align-items is not one of them. The CSS specification defines a specific set of accepted values, and using auto will cause the declaration to be ignored by browsers, potentially breaking your intended layout.

This mistake often stems from confusion with the related property align-self, which does accept auto as its default value. When align-self is set to auto, it defers to the parent container’s align-items value. However, align-items itself has no such delegation mechanism — it is the property that sets the default alignment for all items in the container.

The valid values for align-items include:

• normal — behaves as stretch in flex containers and has context-dependent behavior in other layout modes.
• stretch — items are stretched to fill the container along the cross axis (the default behavior in flexbox).
• center — items are centered along the cross axis.
• flex-start / start — items are aligned to the start of the cross axis.
• flex-end / end — items are aligned to the end of the cross axis.
• baseline / first baseline / last baseline — items are aligned based on their text baselines.
• self-start / self-end — items are aligned based on their own writing mode.

If you intended the default behavior, use stretch (for flexbox) or normal. If you were trying to reset the property, use initial, unset, or revert instead of auto.

Examples

Incorrect: using auto as a value

<div style="display: flex; align-items: auto;">
  <p>Item one</p>
  <p>Item two</p>
</div>

This triggers the validation error because auto is not a recognized value for align-items.

Fixed: using stretch for default flexbox behavior

<div style="display: flex; align-items: stretch;">
  <p>Item one</p>
  <p>Item two</p>
</div>

Fixed: using center to center items

<div style="display: flex; align-items: center;">
  <p>Item one</p>
  <p>Item two</p>
</div>

Fixed: using flex-start to align items to the top

<div style="display: flex; align-items: flex-start;">
  <p>Item one</p>
  <p>Item two</p>
</div>

Correct use of auto with align-self

If your intention was to let a specific child item defer to its parent’s alignment, use align-self: auto on the child element instead:

<div style="display: flex; align-items: center;">
  <p>Centered item</p>
  <p style="align-self: auto;">Also centered (defers to parent)</p>
  <p style="align-self: flex-end;">Aligned to the end</p>
</div>

Here, align-self: auto is valid on individual items and tells them to inherit the align-items value from the container.