СSS Свойство justify-content
Пример
Выровнить гибкие элементы по центру контейнера:
div
{
display: flex;
justify-content: center;
}
Редактор кода »
Определение и использование
Свойство justify-content выравнивает элементы гибкого контейнера, когда элементы не используют все доступное пространство на главной оси (по горизонтали).
Совет: Используйте свойство align-items выравнивать элементы по вертикали.
| Значение по умолчанию: | flex-start |
|---|---|
| Унаследованный: | нет |
| Анимируемый: | нет Прочитайте о animatable |
| Версия: | CSS3 |
| JavaScript синтаксис: | object.style.justifyContent="space-between" Попробовать |
Поддержка браузеров
Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Числа, за которыми следует -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 | Устанавливает для этого свойства значение по умолчанию. Прочитайте о initial | Воспроизвести » |
| inherit | Наследует это свойство от родительского элемента. Прочитайте о inherit |
Примеры
Пример
Выровнить гибкие элементы в начале контейнера (это значение по умолчанию):
div
{
display: flex;
justify-content: flex-start;
}
Редактор кода »
Пример
Выровняйте гибкие элементы в конце контейнера:
div
{
display: flex;
justify-content: flex-end;
}
Редактор кода »
Пример
Отображение гибких элементов с пробелом между строками:
div
{
display: flex;
justify-content: space-between;
}
Редактор кода »
Пример
Отображение гибких элементов с пробелами до, между и после строк:
div
{
display: flex;
justify-content: space-around;
}
Редактор кода »
Связанные страницы
CSS Справочник: Свойство align-content
CSS Справочник: Свойство align-items
CSS Справочник: Свойство align-self
HTML DOM Справочник: Свойство justifyContent
