пример
Сделайте некоторое пространство вокруг элементов гибкого <div> элемент:
div
{
display: -webkit-flex; /* Safari */
-webkit-justify-content: space-around; /* Safari 6.1+ */
display: flex;
justify-content: space-around;
}
Попробуй сам " Определение и использование
Свойство оправдает-контент выравнивает элементы гибкого контейнера, когда элементы не использовать все доступное пространство на главной оси (horizontally) по (horizontally) .
Совет: Используйте ALIGN-всевозможное свойство для выравнивания элементов на поперечной оси (vertically) по (vertically) .
| Значение по умолчанию: | flex-start |
|---|---|
| Наследование: | no |
| Animatable: | no. Read about animatable |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object .style.justifyContent="space-between" Try it |
Поддержка браузеров
Числа в таблице указать первую версию браузера, которая полностью поддерживает свойство.
Числа следуют -webkit- или -moz- указать первую версию, которая работала с приставкой.
| Имущество | |||||
|---|---|---|---|---|---|
| justify-content | 29,0 21,0 -webkit- | 11,0 | 28,0 18,0 -moz- | 9.0 6.1 -webkit- | 17,0 |
CSS Синтаксис
justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;Значения свойств
| Стоимость | Описание | Сыграй |
|---|---|---|
| flex-start | Значение по умолчанию. Элементы расположены в начале контейнера | Сыграй " |
| flex-end | Элементы расположены в конце контейнера | Сыграй " |
| center | Элементы расположены в центре контейнера | Сыграй " |
| space-between | Элементы расположены с промежутком между линиями | Сыграй " |
| space-around | Элементы расположены с пространством до, между и после того, как линии | Сыграй " |
| initial | Устанавливает это свойство в значение по умолчанию. Читайте о первоначальный | Сыграй " |
| inherit | Наследует это свойство от своего родительского элемента. Читайте о унаследовать |
Похожие страницы
CSS Ссылка: align-content property
CSS Справка: align-items property
CSS Справка: align-self property
HTML DOM ссылка: justifyContent property