Свойство align-items: поперечная ось
Как выравнивать элементы по поперечной оси Flexbox и почему ось не всегда вертикальная.
Как это работает
align-items задаёт выравнивание элементов по поперечной оси flex-контейнера. При обычном flex-direction: row она идёт вертикально, а при column — горизонтально. Поэтому полезнее думать об осях, а не запоминать «это свойство для вертикали».
Значение stretch растягивает элементы с автоматическим размером по поперечной оси. center центрирует их, а baseline помогает выровнять строки текста с разным размером шрифта. У отдельного потомка результат можно переопределить align-self.
Пример в интерфейсе
.row { display: flex; align-items: center; gap: 12px; min-height: 130px; background: #f0f3f5; padding: 12px; }
.row span { background: #d9ebdf; padding: 12px; }Значения и поведение
| Значение или правило | Результат |
|---|---|
| center | Выравнивание по центру поперечной оси. |
| stretch | Растяжение при подходящих автоматических размерах. |
| flex-start / flex-end | Начало или конец поперечной оси. |
| baseline | Выравнивание по базовой линии текста. |
На что обратить внимание
Для заметного центрирования должно быть свободное место. Если высота контейнера равна высоте единственного ребёнка, визуально ничего не изменится.
Проверьте на практике
Замените center на stretch и уберите фиксированную высоту у детей. Затем переключите flex-direction на column.
Связанные темы: justify-content, flex.
Попробуйте сами
РЕЗУЛЬТАТ · ИЗОЛИРОВАННЫЙ ПРЕДПРОСМОТР
Измените код и нажмите «Запустить». JavaScript и внешние запросы отключены.
Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.