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