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