CSS: “align-items”: “left” is not a “align-items” value.

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:

<div style="display: flex; align-items: left;">
  <p>Hello</p>
</div>

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

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

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

<div style="display: flex; justify-content: flex-start;">
  <p>Hello</p>
</div>

Learn more:

MDN Reference

CSS align-items

→

MDN Reference

CSS Box Alignment

→