align-items
Выравнивает элементы поперёк главной оси — в ряду это по вертикали.
Синтаксис
align-items: value;Значения
| Параметр | Тип | Описание |
|---|---|---|
| stretch | keyword | Растягиваются на всю высоту строки (по умолчанию). |
| center | keyword | По середине. |
| flex-start | keyword | Вверху (в ряду). |
| flex-end | keyword | Внизу (в ряду). |
| baseline | keyword | По базовой линии текста. |
Примеры
Разное выравнивание:
<style>
.row { display: flex; gap: 6px; height: 80px; background: whitesmoke; margin-bottom: 6px; }
.row div { padding: 6px; background: plum; }
</style>
<div class="row"><div>stretch</div><div>default</div></div>
<div class="row" style="align-items: center;"><div>center</div><div>center</div></div>
<div class="row" style="align-items: flex-end;"><div>end</div><div>end</div></div>Центрирование в обоих направлениях:
<div style="display: flex; align-items: center; justify-content: center; height: 100px; background: honeydew;">
Exactly in the center
</div>Примечания
В столбике (flex-direction: column) align-items работает по горизонтали. Для одного элемента используйте align-self.
См. также
- justify-content — Распределяет элементы вдоль главной оси flex- или grid-контейнера.
- align-self — Выравнивает один элемент поперёк главной оси, перекрывая `align-items` контейнера.
- place-items — Задаёт `align-items` и `justify-items` сразу.
Вопросы и ответы по теме
В учебнике
- Flexbox — Раскладка элементов в ряд или колонку с помощью flexbox — оси, направление, промежутки, выравнивание и перенос.