Чем отличаются align-content, align-items и align-self?

Question

Accepted Answer

## По осям Flex/Grid

- **`align-items`** — выравнивание элементов по **поперечной** оси внутри линии/ячейки (flex) или по block-оси в grid-области.
- **`align-self`** — то же для **одного** item, перебивает `align-items`.
- **`align-content`** — распределение **линий** (flex при `flex-wrap` и свободной высоте) или треков grid по поперечной/block оси, когда есть лишнее пространство **между группами**, не внутри одного ряда.

```css
.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;   /* каждый item в своей линии */
  align-content: center; /* пачка линий как целое */
  height: 200px;
}
.item-special { align-self: stretch; }
```

Частая путаница: без wrap и лишней высоты `align-content` «молчит».

## Итог

items/self — про элементы; content — про упаковку линий/треков в свободном пространстве.