CSS align-content Свойство
Пример
Линии упаковки к центру контейнера Flex:
div
{
width: 70px;
height: 300px;
border: 1px solid #c3c3c3;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-content: center;
align-content: center;
}
Определение и использование
The align-content изменяет поведение свойства
flex-wrap Свойство. Он похож на
align-items, но вместо выравнивания элементов Flex, он выравнивает гибкие линии.
Примечание: Должно быть несколько строк элементов для этого свойства, чтобы иметь какой-либо эффект!
Совет: Используйте justify-content для выравнивания элементов на главной оси (горизонтально).
| Значение по умолчанию: | Стрейч |
|---|---|
| Inherited: | no |
| Animatable: | no. Читайте о animatable |
| Version: | 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 | ||
| flex-start | Линии упакованы к началу контейнера Flex | ||
| flex-end | Линии упакованы к концу контейнера Flex | ||
| space-between | Линии равномерно распределяются в контейнере Flex | ||
| space-around | Линии равномерно распределяются в контейнере Flex, с половиной размера пространств на любом конце | ||
| initial | Присваивает этому свойству значение по умолчанию. (Читайте о initial) | ||
| inherit | Наследует это свойство из родительского элемента. (Читайте о inherit) |
Похожие страницы
CSS Справка: align-items Свойство
CSS Справка: align-self Свойство
CSS Справка: justify-content Свойство
HTML DOM Справочник: alignContent Свойство