justify-content
CSS свойство justify-content определяет, как браузер распределяет пространство между и вокруг элементов контента вдоль главной оси flex контейнера, или вдоль строчной оси grid контейнера.
Интерактивный пример ниже демонстрирует некоторые значения, используя Grid размещение.
Интерактивный пример
Выравнивание выполняется после того, как применяются длины и автоматические поля, что означает, что если во Flexbox разметке есть хотя бы один flex-элемент, с flex-grow отличным от 0 , эффект не будет применён, потому что не останется свободного места.
Синтаксис
/* Позиционное выравнивание */ justify-content: center; /* Выравнивание элементов по центру */ justify-content: start; /* Выравнивание элементов в начале */ justify-content: end; /* Выравнивание элементов в конце */ justify-content: flex-start; /* Выравнивание флекс-элементов с начала */ justify-content: flex-end; /* Выравнивание флекс-элементов с конца */ justify-content: left; /* Выравнивание элементов по левому краю */ justify-content: right; /* Выравнивание элементов по правому краю */ /* Выравнивание относительно осевой линии */ justify-content: baseline; justify-content: first baseline; justify-content: last baseline; /* Распределённое выравнивание */ justify-content: space-between; /* Равномерно распределяет все элементы по ширине flex-блока. Первый элемент вначале, последний в конце */ justify-content: space-around; /* Равномерно распределяет все элементы по ширине flex-блока. Все элементы имеют полноразмерное пространство с обоих концов */ justify-content: space-evenly; /* Равномерно распределяет все элементы по ширине flex-блока. Все элементы имеют равное пространство вокруг */ justify-content: stretch; /* Равномерно распределяет все элементы по ширине flex-блока. Все элементы имеют "авто-размер", чтобы соответствовать контейнеру */ /* Выравнивание при переполнении */ justify-content: safe center; justify-content: unsafe center; /* Глобальные значения */ justify-content: inherit; justify-content: initial; justify-content: unset;
Значения
Элементы располагаются друг за другом и прижимаются к началу контейнера по главной оси.
Элементы располагаются друг за другом и прижимаются к концу контейнера по главной оси.
Элементы располагаются друг за другом и прижимаются к началу контейнера по главной оси, в зависимости от её направления (flex-direction). Для элементов, которые не являются дочерними элементами flex контейнера, это значение обрабатывается как start .
Элементы располагаются друг за другом и прижимаются к концу контейнера по главной оси, в зависимости от её направления (flex-direction). Для элементов, которые не являются дочерними элементами flex контейнера, это значение обрабатывается как end .
Элементы располагаются друг за другом в центре контейнера по главной оси.
Элементы располагаются друг за другом и прижимаются к левому краю контейнера по главной оси. Если главная ось не горизонтальна, это значение работает как start .
Элементы располагаются друг за другом и прижимаются к правому краю контейнера по главной оси. Если главная ось не горизонтальна, это значение работает как start .
Элементы располагаются на своих обычных позициях, так как будто свойство justify-content не задано. Этот параметр ведёт себя как stretch в grid и flex контейнерах.
Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group. The fallback alignment for first baseline is start , the one for last baseline is end .
Элементы равномерно распределены вдоль главной оси контейнера. Расстояния между каждой парой соседних элементов равны. Первый элемент прижат к началу контейнера по главной оси, а последний — к концу.
Элементы равномерно распределены вдоль главной оси контейнера. Расстояния между каждой парой соседних элементов равны. Пустые пространства перед первым элементом и после последнего элемента равны половине расстояния между парами соседних элементов.
Элементы равномерно распределены вдоль главной оси контейнера. Расстояния между каждой парой соседних элементов равны расстояниям от начала контейнера до первого элемента и от последнего элемента до конца контейнера.
If the combined size of the items is less than the size of the alignment container, any auto -sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by max-height / max-width (or equivalent functionality), so that the combined size exactly fills the alignment container along the main axis.
Примечание: stretch не поддерживается гибкими контейнерами (flexbox).
If the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were start .
Regardless of the relative sizes of the item and alignment container, the given alignment value is honored.
Формальный синтаксис
justify-content =
normal | (en-US)
| (en-US)
? (en-US) [ (en-US) | (en-US) left | (en-US) right ] (en-US)
=
space-between | (en-US)
space-around | (en-US)
space-evenly | (en-US)
stretch
=
unsafe | (en-US)
safe
=
center | (en-US)
start | (en-US)
end | (en-US)
flex-start | (en-US)
flex-end
Пример
CSS
#container display: flex; justify-content: space-between; /* Может быть изменено */ > #container > div width: 100px; height: 100px; background: linear-gradient(-45deg, #788cff, #b4c8ff); >
div id="container"> div>div> div>div> div>div> div> select id="justifyContent"> option value="start">startoption> option value="end">endoption> option value="flex-start">flex-startoption> option value="flex-end">flex-endoption> option value="center">centeroption> option value="left">leftoption> option value="right">rightoption> option value="baseline">baselineoption> option value="first baseline">first baselineoption> option value="last baseline">last baselineoption> option value="space-between" selected>space-betweenoption> option value="space-around">space-aroundoption> option value="space-evenly">space-evenlyoption> option value="stretch">stretchoption> select>
var justifyContent = document.getElementById("justifyContent"); justifyContent.addEventListener("change", function (evt) document.getElementById("container").style.justifyContent = evt.target.value; >);
Результат
Спецификации
| Specification |
|---|
| CSS Box Alignment Module Level 3 # align-justify-content |
| CSS Flexible Box Layout Module Level 1 # justify-content-property |
justify-content
Определяет, как браузер распределяет пространство вокруг флекс-элементов вдоль главной оси контейнера. Это делается после того, как применяются размеры и автоматические отступы, за исключением ситуации, когда по крайней мере у одного элемента flex-grow больше нуля. При этом не остаётся никакого свободного пространства для манипулирования.
Краткая информация
| Значение по умолчанию | flex-start |
|---|---|
| Наследуется | Нет |
| Применяется | К флекс-контейнерам |
| Анимируется | Нет |
Синтаксис
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenlyСинтаксис
| Описание | Пример | |
|---|---|---|
| Указывает тип значения. | ||
| A && B | Значения должны выводиться в указанном порядке. | && |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,]* |
| + | Повторять один или больше раз. | + |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| Повторять не менее A, но не более B раз. | ||
| # | Повторять один или больше раз через запятую. | # |
Значения
flex-start Флексы прижаты к началу строки. flex-end Флексы прижаты к концу строки. center Флексы выравниваются по центру строки. space-between Флексы равномерно распределяются по всей строке. Первый и последний элемент прижимаются к соответствующим краям контейнера. space-around Флексы равномерно распределяются по всей строке. Пустое пространство перед первым и после последнего элементов равно половине пространства между двумя соседними элементами. space-evenly Флексы распределяются так, что расстояние между любыми двумя соседними элементами, а также перед первым и после последнего, было одинаковым.
Песочница
flex-start flex-end center space-between space-around space-evenly
Пример