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

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-align-items-auto-is-not-a-align-items-value
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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

```html
<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

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

### Fixed: using `center` to center items

```html
<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

```html
<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:

```html
<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.