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> 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 | Значение элемента наследуется от родительского элемента. |
Поддержка браузера
| 29.0+ 21-28 -webkit- |
28.0+ | 9.0+ 6.1-8.0 -webkit- |
12.1+ |
CSS justify-content: как использовать и применять к элементам
CSS свойство justify-content используется для выравнивания содержимого внутри контейнера по главной оси. Это свойство управляет распределением свободного пространства между элементами или их контейнером, когда все элементы в контейнере занимают не всю доступную ширину их контейнера по горизонтали. Свойство justify-content имеет несколько значений:
1. flex-start (по умолчанию) — Элементы распределяются вдоль главной оси, начиная с начала контейнера.
2. flex-end — Элементы распределяются вдоль главной оси, заканчивая в конце контейнера.
3. center — Элементы распределяются вдоль главной оси, выравниваясь по центру контейнера.
4. space-between — Элементы распределяются вдоль главной оси, таким образом, чтобы расстояние между элементами было одинаковым, а расстояние от края контейнера до первого и последнего элементов было равным половине расстояния между элементами.
5. space-around — Элементы распределяются вдоль главной оси, таким образом, чтобы расстояние между элементами и расстояние от края контейнера до первого и последнего элементов были одинаковыми.
Например, вот как мы можем использовать свойство justify-content, чтобы выровнять элементы по центру контейнера:
html Item 1 Item 2 Item 3 css .container < display: flex; justify-content: center; >.item
В этом примере мы используем display:flex; для установления гибкого контейнера, а свойство justify-content:center; выравнивает элементы в контейнере по центру.
Также, мы можем использовать другие значения свойства, чтобы распределить элементы по-разному, как показано в следующих примерах:
css .container < display: flex; justify-content: flex-start; >.container < display: flex; justify-content: flex-end; >.container < display: flex; justify-content: space-between; >.container
Таким образом, свойство justify-content является важным инструментом для работы с гибким контейнером, который позволяет легко выравнивать содержимое внутри контейнера по главной оси.
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
Пример