justify — content
Свойство для выравнивания элементов по основной оси в гридах и флексах.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Обновлено 11 мая 2023
Кратко
Скопировать ссылку «Кратко» Скопировано
Свойство выравнивает флекс-элементы внутри флекс-контейнера по основной оси.
При расположении флекс-элементов в ряд свойство управляет выравниванием по горизонтали. При расположении в колонку — выравниванием по вертикали.
Пример
Скопировать ссылку «Пример» Скопировано
Код ниже заставит флекс-элементы распределиться по всей ширине родителя, разделив свободное пространство поровну.
.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 59, поддерживается 59
- Edge 79, поддерживается 79
- Firefox 81, поддерживается 81
- Safari 11, поддерживается 11
На практике
Скопировать ссылку «На практике» Скопировано
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
�� Если внутри флекс-контейнера всего два элемента, то удобно использовать justify — content : space — between , чтобы прижать их к противоположным краям родителя. Это имитирует поведение свойства float , но без последствий.
justify-content¶
Свойство justify-content определяет, как браузер распределяет пространство вокруг флекс-элементов вдоль главной оси контейнера.
Демо¶
Это делается после того, как применяются размеры и автоматические отступы, за исключением ситуации, когда по крайней мере у одного элемента flex-grow больше нуля. При этом не остаётся никакого свободного пространства для манипулирования.
Flexbox и выравнивание
Синтаксис¶
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 .
Элементы упакованы вплотную друг с другом по направлению к правому краю контейнера выравнивания по соответствующей оси. Если ось свойства не параллельна встроенной оси, это значение ведет себя как start .
baseline , first baseline , last baseline
Определяет участие в выравнивании первой или последней базовой линии: выравнивает базовую линию выравнивания первого или последнего базового набора блока с соответствующей базовой линией в общем первом или последнем базовом наборе всех блоков в его группе совместного использования базовой линии. Обратно-совместимое выравнивание для first baseline — start , а для last baseline — end .
Флексы равномерно распределяются по всей строке. Первый и последний флекс прижимаются к соответствующим краям контейнера.
Флексы равномерно распределяются по всей строке. Пустое пространство перед первым и после последнего элементов равно половине пространства между двумя соседними элементами.
Элементы равномерно распределены внутри контейнера выравнивания вдоль главной оси. Интервал между каждой парой смежных элементов, краем основного начала и первым элементом, краем основного конца и последним элементом абсолютно одинаков.
Если объединенный размер элементов меньше, чем размер контейнера выравнивания, размер любого элемента авторазмера увеличивается одинаково (не пропорционально), при этом соблюдая ограничения, накладываемые max-height / max-width (или эквивалентными функциями), так что объединенный размер точно заполняет контейнер выравнивания вдоль главной оси.
Если размер элемента выходит за пределы контейнера выравнивания, элемент выравнивается, как если бы режим выравнивания был start .
Независимо от относительных размеров элемента и контейнера выравнивания, данное значение выравнивания учитывается.
Примечание¶
- Safari до версии 9 поддерживает свойство -webkit-justify-content .
Спецификации¶
- CSS Box Alignment Module Level 3
- CSS Flexible Box Layout Module
Поддержка браузерами¶
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, выравнивание вдоль главной оси
Вместо «горизонтального» выравнивания во флексбоксе используется свойство для распределения элементов вдоль главной оси — justify-content . Это свойство задаётся для флекс-контейнера.
Его значением по умолчанию является flex-start . При этом значении элементы располагаются у начала главной оси.
Вся теория и выполнение задания доступны по подписке
Подписка — это:
После подписки вы получите доступ:
- теория тренажёров без ограничений;
- доступ ко всем платным тренажёрам;
- интересные и сложные вызовы для практики;
- безлимитные проверки испытаний.
Бесплатные материалы:
- Конспект части «Флексбокс. Знакомство»
- Статья «Примеры использования флексбоксов»
- Видео «Кому нужны флексы»
Свойство justify-content
Сейчас ось направлена слева направо (это делает flex-direction: row), а блоки прижаты к левой стороне:
#parent < display: flex; justify-content: flex-start; flex-direction: row; border: 1px solid #696989; >#parent > div < width: 100px; height: 50px; border: 1px solid #696989; >
Пример . Значение flex-end
В данном примере ось также направлена слева направо, но блоки прижаты к правой стороне, так как задано justify-content в значении flex-end :
#parent < display: flex; justify-content: flex-end; flex-direction: row; border: 1px solid #696989; >#parent > div < width: 100px; height: 50px; border: 1px solid #696989; >
Пример . Значение center
Сейчас блоки будут стоять по центру независимо от направления главной оси:
#parent < display: flex; justify-content: center; flex-direction: row; border: 1px solid #696989; >#parent > div < width: 100px; height: 50px; border: 1px solid #696989; >
Пример . Значение space-between
Блоки распределены вдоль главной оси, при этом первый элемент прижат к началу оси, а последний — к концу:
#parent < display: flex; justify-content: space-between; flex-direction: row; border: 1px solid #696989; >#parent > div < width: 100px; height: 50px; border: 1px solid #696989; >
Пример . Значение space-around
Блоки распределены вдоль главной оси, при этом между первым блоком и началом оси, последним блоком и концом оси такой же промежуток, как и между остальными блоками. Однако, промежутки суммируются и между двумя блоками расстояние в два раза больше, чем между блоком и началом/концом оси:
#parent < display: flex; justify-content: space-around; flex-direction: row; border: 1px solid #696989; >#parent > div < width: 100px; height: 50px; border: 1px solid #696989; >
Пример . Значение center. Ось вниз
Сменим направление главной оси, задав flex-direction в значении column :
#parent < display: flex; justify-content: center; flex-direction: column; height: 400px; border: 1px solid #696989; >#parent > div < width: 100px; height: 50px; border: 1px solid #696989; >
Пример . Значение space-between. Ось вниз
Сейчас блоки распределятся равномерно по вертикали:
#parent < display: flex; justify-content: space-between; flex-direction: column; height: 400px; border: 1px solid #696989; >#parent > div < width: 100px; height: 50px; border: 1px solid #696989; >
Пример . Выравнивание по началу горизонтальной оси (строки) в гриде
Давайте установим выравнивание для наших элементов по началу горизонтальной оси:
#parent < display: grid; justify-content: start; grid-template-columns: 100px 100px; grid-template-rows: repeat(3, 1fr); gap: 10px; padding: 10px; border: 2px solid #696989; height: 200px; width: 400px; >#parent > div < gap: 10px; padding: 10px; box-sizing: border-box; border: 1px solid #696989; >
Пример . Выравнивание по центру горизонтальной оси в гриде
А теперь установим выравнивание для наших элементов по центру горизонтальной оси:
#parent < display: grid; justify-content: center; grid-template-columns: 100px 100px; grid-template-rows: repeat(3, 1fr); gap: 10px; padding: 10px; border: 2px solid #696989; height: 200px; width: 400px; >#parent > div < gap: 10px; padding: 10px; box-sizing: border-box; border: 1px solid #696989; >
Пример . Выравнивание по концу горизонтальной оси в гриде
Давайте установим выравнивание для наших элементов по концу горизонтальной оси:
#parent < display: grid; justify-content: end; grid-template-columns: 100px 100px; grid-template-rows: repeat(3, 1fr); gap: 10px; padding: 10px; border: 2px solid #696989; height: 200px; width: 400px; >#parent > div < gap: 10px; padding: 10px; box-sizing: border-box; border: 1px solid #696989; >
Смотрите также
- свойство flex-direction ,
которое задает направление осей flex блоков - свойство justify-content ,
которое задает выравнивание по главной оси - свойство align-items ,
которое задает выравнивание по поперечной оси - свойство flex-wrap ,
которое многострочность flex блоков - свойство flex-flow ,
сокращение для flex-direction и flex-wrap - свойство order ,
которое задает порядок flex блоков - свойство align-self ,
которое задает выравнивание одного блока - свойство flex-basis ,
которое задает размер конкретного flex блока - свойство flex-grow ,
которое задает жадность flex блоков - свойство flex-shrink ,
которое задает сжимаемость flex блоков - свойство flex ,
сокращение для flex-grow, flex-shrink и flex-basis