align-content
Распределяет строки многострочного flex-контейнера или ряды сетки вдоль поперечной оси.
Синтаксис
align-content: value;Значения
| Параметр | Тип | Описание |
|---|---|---|
| flex-start | center | flex-end | keyword | Строки в начале, по центру или в конце. |
| space-between | keyword | Первая и последняя строки у краёв. |
| stretch | keyword | Строки растягиваются на всё место (по умолчанию). |
Примеры
Строки распределены по высоте контейнера:
<style>
.box { display: flex; flex-wrap: wrap; gap: 6px; width: 200px; height: 140px; background: whitesmoke; }
.box div { width: 80px; padding: 6px; background: lightcoral; }
</style>
<div class="box" style="align-content: space-between;">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>Примечания
Во flexbox align-content работает только при flex-wrap: wrap и свободном месте в контейнере. place-content задаёт align-content и justify-content сразу.
См. также
- flex-wrap — Могут ли flex-элементы переноситься на новые строки.
- align-items — Выравнивает элементы поперёк главной оси — в ряду это по вертикали.
- justify-content — Распределяет элементы вдоль главной оси flex- или grid-контейнера.
В учебнике
- Flexbox — Раскладка элементов в ряд или колонку с помощью flexbox — оси, направление, промежутки, выравнивание и перенос.