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

<divstyle="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

<divstyle="display: flex;align-items: stretch;">

<p>Item one</p>

<p>Item two</p>

</div>

Fixed: using center to center items

<divstyle="display: flex;align-items: center;">

<p>Item one</p>

<p>Item two</p>

</div>

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

<divstyle="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:

<divstyle="display: flex;align-items: center;">

<p>Centered item</p>

<pstyle="align-self: auto;">Also centered (defers to parent)</p>

<pstyle="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.

left is not a valid value for the align-items CSS property.

The align-items property controls how flex or grid items are aligned along the cross axis of their container. Its valid values include stretch, flex-start, flex-end, center, baseline, start, end, self-start, and self-end.

The value left is not recognized because align-items works on the cross axis (typically vertical), not the inline/horizontal axis. If you want to align items to the start, use flex-start or start instead.

If you're actually trying to align content horizontally to the left, you likely want the justify-content property (which controls the main axis) or text-align: left on the container.

How to Fix

Incorrect:

<divstyle="display: flex;align-items: left;">

<p>Hello</p>

</div>

Fixed — aligning items to the start of the cross axis:

<divstyle="display: flex;align-items: flex-start;">

<p>Hello</p>

</div>

Fixed — aligning items horizontally to the left (main axis):

<divstyle="display: flex;justify-content: flex-start;">

<p>Hello</p>

</div>