CSS свойство align-content
Пример
Линии упаковки к центру гибкого контейнера:
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;
}
Попробуйте сами »
Определение и использование
Cвойство align-content изменяет поведение свойства flex-wrap.
Это похоже на align-items, но вместо того, чтобы выравнить гибкий элемент, он выравнит гибкие линии.
Примечание: Должно быть несколько линии элементов для этого свойства, чтобы иметь какой-либо эффект!
Совет: Используйте свойство justify-content выравнивания элементов по главной оси (по горизонтали).
| Значение по умолчанию: | stretch |
|---|---|
| Унаследованный: | нет |
| Анимируемый: | нет. Прочитать о animatable |
| Версия: | 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 | Линии равномерно распределены в внутри гибкого контейнера, с размером в половину пространства на любом конце | Воспроизвести » |
| initial | Задает для свойства значение индекса. Прочитать о initial | Воспроизвести » |
| inherit | Наследует это свойство от родительского элемента. Прочитать о inherit |
Связанные страницы
CSS справочник: Свойство align-items
CSS справочник: Свойство align-self
CSS справочник: Свойство justify-content
HTML DOM справочник: Свойство alignContent