пример
Пакет линии по направлению к центру гибкого контейнера:
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;
}
Попробуй сам " Определение и использование
ALIGN-контента свойство изменяет поведение свойства флекс-оберткой. Он похож на ALIGN-элементы, но вместо выравнивания гибких элементов, он выравнивает гибкие линии.
Совет: Используйте оправдаться-контент свойства для выравнивания элементов на главной оси (horizontally) по (horizontally) .
Примечание: Там должно быть несколько строк элементов для данного объекта , чтобы иметь какой - либо эффект.
| Значение по умолчанию: | stretch |
|---|---|
| Наследование: | no |
| Animatable: | no. Read about animatable |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object .style.alignContent="center" Try it |
Поддержка браузеров
Числа в таблице указать первую версию браузера, которая полностью поддерживает свойство.
Числа с последующим -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 | Устанавливает это свойство в значение по умолчанию. Читайте о первоначальный | Сыграй " |
| inherit | Наследует это свойство от своего родительского элемента. Читайте о унаследовать |
Похожие страницы
CSS Справка: align-items property
CSS Справка: align-self property
CSS Ссылка: justify-content property
HTML DOM ссылка: alignContent property