Линии упаковки направляются к центру гибкого контейнера:
div {
width: 70px;
height: 300px;
border: 1px solid #c3c3c3;
display: flex;
flex-wrap: wrap;
align-content: center;
}
Попробуйте сами »
Определение align-content
CSS свойство align-content определяет, как гибкие линии распределяются вдоль поперечной оси в контейнере flexbox.
В макете flexbox главная ось находится в flex-direction (по умолчанию - "строка", горизонтальная), а поперечная ось перпендикулярна главной оси (по умолчанию - "столбец", вертикальный).
Совет: Используйте CSS свойство justify-content для выравнивания элементов по главной оси (по горизонтали).
Примечание: CSS свойство align-content также можно использовать в сетчатом контейнере для выравнивания элементов сетки по направлению блока. Для страниц на английском языке направление блока - вниз, а направление встроенной строки - слева направо.
| Значение по умолчанию: | stretch |
|---|---|
| Унаследовано: | no |
| Анимируемый: | no. Читайте о animatable |
| Версия: | CSS3 |
| JavaScript синтаксис: | object.style.alignContent="center" Попробуй |
Поддержка align-content
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| align-content | 57.0 | 16.0 | 52.0 | 10.1 | 44.0 |
Синтаксис align-content
align-content: stretch|center|flex-start|flex-end|space-between|space-around|space-evenly|initial|inherit;
Значения align-content
| Значение | Описание | Демонстрация |
|---|---|---|
| stretch | Значение по умолчанию. Линии растягиваются, чтобы занять оставшееся пространство | Демо ❯ |
| center | Линии укладываются по направлению к центру гибкого контейнера | Демо ❯ |
| flex-start | Линии упаковываются ближе к началу гибкого контейнера | Демо ❯ |
| flex-end | Линии упаковываются ближе к концу гибкого контейнера | Демо ❯ |
| space-between | Линии равномерно распределяются в гибком контейнере | Демо ❯ |
| space-around | Линии равномерно распределены в гибком контейнере с промежутками половинного размера на обоих концах | Демо ❯ |
| space-evenly | Линии равномерно распределены в гибком контейнере с равным пространством вокруг них | Демо ❯ |
| initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial | |
| inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Примеры сетки
Примеры с grid
Все элементы располагаются в конце контейнера сетки, в направлении блока:
#container {
display: grid;
align-content: end;
}
Попробуйте сами »
Страницы по теме
CSS Учебник: CSS flexbox
CSS Учебник: CSS grid
CSS Справочник: align-items свойство
CSS Справочник: align-self свойство
CSS Справочник: justify-content свойство
HTML DOM справочник: alignContent свойство