justify-content¶
Свойство justify-content определяет, как браузер распределяет пространство вокруг флекс-элементов вдоль главной оси контейнера.
Демо¶
Это делается после того, как применяются размеры и автоматические отступы, за исключением ситуации, когда по крайней мере у одного элемента flex-grow больше нуля. При этом не остаётся никакого свободного пространства для манипулирования.
Синтаксис¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
/* Позиционное выравнивание */ 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; /* Распределенное выравнивание */ /* Равномерно распределяет все элементы по ширине flex-блока. Первый элемент вначале, последний в конце */ justify-content: space-between; /* Равномерно распределяет все элементы по ширине flex-блока. Все элементы имеют полуразмерное пространство с обоих концов */ justify-content: space-around; /* Равномерно распределяет все элементы по ширине flex-блока. Все элементы имеют равное пространство вокруг */ justify-content: space-evenly; /* Равномерно распределяет все элементы по ширине flex-блока. Все элементы имеют "авто-размер", чтобы соответствовать контейнеру */ justify-content: stretch; /* Выравнивание при переполнении */ justify-content: safe center; justify-content: unsafe center; /* Глобальные значения */ justify-content: inherit; justify-content: initial; justify-content: unset; Значения¶
Значение по-умолчанию: normal
Применяется к flex-контейнерам
start Элементы располагаются друг за другом и прижимаются к началу контейнера по главной оси. end Элементы располагаются друг за другом и прижимаются к концу контейнера по главной оси. flex-start Флексы прижаты к началу строки. flex-end Флексы прижаты к концу строки. center Флексы прижимаются по центру строки. left Элементы упакованы вплотную друг к другу к левому краю контейнера выравнивания. Если ось свойства не параллельна встроенной оси, это значение ведет себя как start . right Элементы упакованы вплотную друг с другом по направлению к правому краю контейнера выравнивания по соответствующей оси. Если ось свойства не параллельна встроенной оси, это значение ведет себя как start .
baseline , first baseline , last baseline Определяет участие в выравнивании первой или последней базовой линии: выравнивает базовую линию выравнивания первого или последнего базового набора блока с соответствующей базовой линией в общем первом или последнем базовом наборе всех блоков в его группе совместного использования базовой линии. Обратно-совместимое выравнивание для first baseline — start , а для last baseline — end .
space-between Флексы равномерно распределяются по всей строке. Первый и последний флекс прижимаются к соответствующим краям контейнера. space-around Флексы равномерно распределяются по всей строке. Пустое пространство перед первым и после последнего элементов равно половине пространства между двумя соседними элементами.
space-evenly Элементы равномерно распределены внутри контейнера выравнивания вдоль главной оси. Интервал между каждой парой смежных элементов, краем основного начала и первым элементом, краем основного конца и последним элементом абсолютно одинаков.
stretch Если объединенный размер элементов меньше, чем размер контейнера выравнивания, размер любого элемента авторазмера увеличивается одинаково (не пропорционально), при этом соблюдая ограничения, накладываемые max-height / max-width (или эквивалентными функциями), так что объединенный размер точно заполняет контейнер выравнивания вдоль главной оси.
safe Если размер элемента выходит за пределы контейнера выравнивания, элемент выравнивается, как если бы режим выравнивания был start .
unsafe Независимо от относительных размеров элемента и контейнера выравнивания, данное значение выравнивания учитывается.
Примечание¶
Спецификации¶
Поддержка браузерами¶
Can I Use flexbox? Data on support for the flexbox feature across the major browsers from caniuse.com.
Описание и примеры¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67
html> head> meta charset="utf-8" /> title>justify-contenttitle> style> section display: flex; margin-bottom: 10px; > section > div border: 1px solid #ccc; width: 100px; height: 100px; background: repeating-radial-gradient( circle at 50% 50%, #fff, #fff 25px, #f96 25px, #f96 50px ); > .flex-start justify-content: flex-start; > .flex-end justify-content: flex-end; > .center justify-content: center; > .space-between justify-content: space-between; > .space-around justify-content: space-around; > style> head> body> section class="flex-start"> div>div> div>div> div>div> section> section class="flex-end"> div>div> div>div> div>div> section> section class="center"> div>div> div>div> div>div> section> section class="space-between"> div>div> div>div> div>div> section> section class="space-around"> div>div> div>div> div>div> section> body> html> justify — content
Свойство для выравнивания элементов по основной оси в гридах и флексах.
Время чтения: меньше 5 мин
Кратко
Скопировать ссылку «Кратко» Скопировано
Свойство выравнивает флекс-элементы внутри флекс-контейнера по основной оси.
При расположении флекс-элементов в ряд свойство управляет выравниванием по горизонтали. При расположении в колонку — выравниванием по вертикали.
Пример
Скопировать ссылку «Пример» Скопировано
Код ниже заставит флекс-элементы распределиться по всей ширине родителя, разделив свободное пространство поровну.
.container display: flex; justify-content: space-between;>.container display: flex; justify-content: space-between; >
Как понять
Скопировать ссылку «Как понять» Скопировано
Это свойство определяет, как распределяется свободное пространство между элементами вдоль главной оси (для флексбоксов), и по горизонтали (для гридов).
Как пишется
Скопировать ссылку «Как пишется» Скопировано
- start — элементы прижимаются к тому краю, откуда начинается чтение на том языке, на котором отображается сайт.
- end — элементы прижимаются к краю, противоположному началу направления чтения на языке сайта.
- flex — start — элементы прижимаются к краю, от которого начинается основная ось.
- flex — end — элементы прижимаются к краю, у которого основная ось заканчивается.
- left — элементы прижмутся к левому краю родителя.
- right — элементы прижмутся к правому краю родителя.
- center — элементы выстраиваются по центру родителя.
- space — between — крайние элементы прижимаются к краям родителя, оставшиеся выстраиваются внутри контейнера равномерно, так, чтобы между ними были одинаковые отступы.
- space — around — свободное пространство делится поровну между элементами и по половине от этой доли размещается по бокам от каждого элемента. Таким образом, между соседними элементами будет равное расстояние, а снаружи крайних элементов — по половине этого расстояния.
- space — evenly — свободное место будет распределено так, чтобы расстояние между любыми двумя элементами было одинаковым и расстояние от крайних элементов до края было таким же.
Если основная ось идёт горизонтально, то для сайта с направлением письма слева направо (LTR) значение start прижмёт элементы к левому краю, а значение end прижмёт элементы к правому краю. Для сайтов с направлением письма справа налево (RTL) элементы будут прижиматься к противоположным краям для аналогичных значений.
В случае, если указано свойство flex — direction : column , то значения left и right срабатывают как start .
Полный список свойств флексбоксов можно посмотреть в гайде по flexbox. А свойства гридов описаны в гайде по grid
- Chrome 57, Поддерживается 57
- Edge 79, Поддерживается 79
- Firefox 81, Поддерживается 81
- Safari 9, Поддерживается 9
На практике
Скопировать ссылку «На практике» Скопировано
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
🛠 Если внутри флекс-контейнера всего два элемента, то удобно использовать justify — content : space — between , чтобы прижать их к противоположным краям родителя. Это имитирует поведение свойства float , но без последствий.
CSS свойство justify-content
Свойство justify-content выравнивает элементы, когда они не используют все доступное пространство по горизонтали. Оно является подсвойством модуля макет гибкого контейнера. Свойство контролирует выравнивание элементов, когда они выходят за границы.
Свойство justify-content должно быть использовано вместе со свойством display, которое имеет значение «flex». Для вертикального выравнивания элементов нужно использовать свойство align-items.
| Значение по умолчанию | flex-start |
| Применяется | К флекс-контейнерам |
| Наследуется | Нет |
| Анимируемое | Нет |
| Версия | CSS3 |
| DOM синтаксис | object.style.justifyContent = «center»; |
Синтаксис
Justify-content: flex-start | flex-end | center | space-between | space-around | initial | inherit;Пример
html> html> head> title>Заголовок документа title> style> .center < width: 400px; height: 150px; border: 1px solid #666; display: -webkit-flex; /* Safari */ -webkit-justify-content: center; /* Safari 6.1+ */ display: flex; justify-content: center; > .center div < width: 70px; height: 70px; background-color: #ccc; border: 1px solid #666; > style> head> body> h2>Пример свойства justify-content h2> p>Установлено свойство "justify-content: center": p> div class="center"> div>1 div> div>2 div> div>3 div> div> body> html>Пример со значением «flex-start»:
Пример
html> html> head> title>Заголовок документа title> style> .start < width: 400px; height: 150px; border: 1px solid #666; display: -webkit-flex; /* Safari */ -webkit-justify-content: flex-start; /* Safari 6.1+ */ display: flex; justify-content: flex-start; > .start div < width: 70px; height: 70px; background-color: #ccc; border: 1px solid #666; > style> head> body> h2>Пример свойства justify-content h2> p>Установлено свойство "justify-content: flex-start": p> div class="start"> div>1 div> div>2 div> div>3 div> div> div> body> html>Пример со значением «flex-end»:
Пример
html> html> head> title>Заголовок документа title> style> .end < width: 400px; height: 150px; border: 1px solid #666; display: -webkit-flex; /* Safari */ -webkit-justify-content: flex-end; /* Safari 6.1+ */ display: flex; justify-content: flex-end; > .end div < width: 70px; height: 70px; background-color: #ccc; border: 1px solid #666; > style> head> body> h2>Пример свойства justify-content h2> p>Установлено свойство "justify-content: flex-end": p> div class="end"> div>1 div> div>2 div> div>3 div> div> div> body> html>Пример, где установлено значение «space-between» для свойства justify-content:
Пример
html> html> head> title>Заголовок документа title> style> .space-between < width: 400px; height: 150px; border: 1px solid #666; display: -webkit-flex; /* Safari */ -webkit-justify-content: space-between; /* Safari 6.1+ */ display: flex; justify-content: space-between; > .space-between div < width: 70px; height: 70px; background-color: #ccc; border: 1px solid #666; > style> head> body> h2>Пример свойства justify-content h2> p>Установлено свойство "justify-content: space-between": p> div class="space-between"> div>1 div> div>2 div> div>3 div> div> div> body> html>Пример со значением «space-around»:
Пример
html> html> head> title>Заголовок документа title> style> .space-around < width: 400px; height: 150px; border: 1px solid #666; display: -webkit-flex; /* Safari */ -webkit-justify-content: space-around; /* Safari 6.1+ */ display: flex; justify-content: space-around; > .space-around div < width: 70px; height: 70px; background-color: #ccc; border: 1px solid #666; > style> head> body> h2>Пример свойства justify-content h2> p>Установлено свойство "justify-content: space-around": p> div class="space-around"> div>1 div> div>2 div> div>3 div> div> div> body> html>Значения
| Значение | Описание |
|---|---|
| flex-start | Элементы позиционируются от начала контейнера. |
| flex-end | Элементы позиционируются от конца контейнера. |
| center | Элементы выравниваются по центру контейнера. |
| space-around | Элементы равномерно распределяются по всей строке. Есть пространство перед первым элементом, а также после последнего элемента. |
| space-between | Между элементами есть равное пространство.. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Значение элемента наследуется от родительского элемента. |