CSS-свойство justify-content определяет, как flex-элементы выравниваются вдоль горизонтальной оси Y flex-контейнера и auto margins.

Значение по умолчанию: flex-start
Применяется к: Flex containers
Наследование: Нет
Анимирование: Нет. Анимируемые свойства
Версия: Новый в CSS3

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

justify-content: flex-start | flex-end | center | space-between | space-around | initial | inherit

Примеры написания кода свойства justify-content:

.flex-container {
    /* Safari */
    display: -webkit-flex;
    -webkit-justify-content: space-around;
    /* Standard syntax */
    display: flex;
    justify-content: space-around;
}

Значения свойств

В следующей таблице описаны значения этого свойства.

Значение Описание
flex-start Элементы расположены в начале flex-контейнера.
flex-end Элементы расположены в конце flex-контейнера.
center Элементы расположены в центре flex-контейнера.
space-between Элементы равномерно распределяются во flex-контейнере таким образом, чтобы пространство между двумя соседними предметами было одинаковым.
space-around Элементы равномерно распределяются во flex-контейнере так, чтобы пространства вокруг (то есть до, между и после) каждого элемента были одинаковыми.
initial Устанавливает это свойство в значение по умолчанию.
inherit Если указан, связанный элемент принимает вычисленное значение своего родительского элемента justify-content.

Поддержка браузеров

Свойство justify-content поддерживается во всех основных браузерах.

Читайте также

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.