justify-content — CSS — Дока
- Кратко
- Пример
- Как понять
- Как пишется
- Подсказки
- На практике
- Алёна Батицкая советует
Кратко
Секция статьи «Кратко»Свойство выравнивает флекс-элементы внутри флекс-контейнера по основной оси.
При расположении флекс-элементов в ряд свойство управляет выравниванием по горизонтали. При расположении в колонку — выравниванием по вертикали.
Пример
Секция статьи «Пример»Код ниже заставит флекс-элементы распределиться по всей ширине родителя, разделив свободное пространство поровну.
.container { display: flex; justify-content: space-between;}
.container {
display: flex;
justify-content: space-between;
}
Как понять
Секция статьи «Как понять»Это свойство определяет, как распределяется свободное пространство между элементами вдоль главной оси (для флексбоксов), и по горизонтали (для гридов).
Как пишется
Секция статьи «Как пишется»flex
(значение по умолчанию) — элементы прижимаются к краю, от которого начинается основная ось.- start flex
— элементы прижимаются к краю, у которого основная ось заканчивается.- end start
— элементы прижимаются к тому краю, откуда начинается чтение на том языке, на котором отображается сайт.end
— элементы прижимаются к краю, противоположному началу направления чтения на языке сайта.left
— элементы прижмутся к левому краю родителя.right
— элементы прижмутся к правому краю родителя.center
— элементы выстраиваются по центру родителя.space
— крайние элементы прижимаются к краям родителя, оставшиеся выстраиваются внутри контейнера равномерно, так, чтобы между ними были одинаковые отступы.- between space
— свободное пространство делится поровну между элементами и по половине от этой доли размещается по бокам от каждого элемента. Таким образом, между соседними элементами будет равное расстояние, а снаружи крайних элементов — по половине этого расстояния.- around space
— свободное место будет распределено так, чтобы расстояние между любыми двумя элементами было одинаковым и расстояние от крайних элементов до края было таким же.- evenly
Если основная ось идёт горизонтально, то для сайта с направлением письма слева направо (LTR) значение start
прижмёт элементы к левому краю, а значение end
прижмёт элементы к правому краю. Для сайтов с направлением письма справа налево (RTL) элементы будут прижиматься к противоположным краям для аналогичных значений.
В случае, если указано свойство flex
, то значения left
и right
срабатывают как start
.
Подсказки
Секция статьи «Подсказки»Хотя большинство значений поддерживаются основными браузерами, с некоторыми из них могут быть трудности. Поэтому лучше на всякий случай проверяйте поддержку на Can I use.
📝
Полный список свойств флексбоксов можно посмотреть в гайде по flexbox.
На практике
Секция статьи «На практике»Алёна Батицкая советует
Секция статьи «Алёна Батицкая советует»🛠 Если внутри флекс-контейнера всего два элемента, то удобно использовать justify
, чтобы прижать их к противоположным краям родителя. Это имитирует поведение свойства float
, но без последствий.
Если вы нашли ошибку, отправьте нам пул-реквест!
Во время отправки формы что-то пошло не так. Попробуйте ещё раз?
←
grid
alt + ←
→
justify
alt + →
Flex.
Утилиты · Bootstrap v5.0.2Задействуйте «гибкое» поведение
Применяйте утилиты display
для создания гибкого контейнера и трансформируйте прямые дочерние элементы в «гибкие». Гибкие контейнеры и элементы можно изменять дополнительными свойствами гибкости.
Я контейнер flexbox!
<div>Я контейнер flexbox!</div>
Я встроенный контейнер Flexbox!
<div>Я встроенный контейнер Flexbox!</div>
Также существуют отзывчивые варианты .d-flex
и .d-inline-flex
.
.d-flex
.d-inline-flex
.d-sm-flex
.d-md-flex
.d-md-inline-flex
.d-lg-flex
.d-lg-inline-flex
.d-xl-flex
.d-xl-inline-flex
. d-xxl-flex
.d-xxl-inline-flex
Направление
Задайте направление гибких элементов в гибком контейнере утилитами направления. В большинстве случаев вы можете пропустить «горизонтальный класс» в данном случае, т.к. умолчание браузера – row
. Однако вы можете попасть в ситуацию, где вам понадобится явно задать это значение (например, при разработке отзывчивой верстки).
Используйте элемент класса .flex-row
для задания горизонтального направления (умолчание браузера), или .flex-row-reverse
для того, чтобы горизонтальное направление начиналось с противоположной стороны.
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
<div> <div>Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> </div> <div> <div>Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> </div>
Используйте класс . flex-column
для создания вертикального направления, или .flex-column-reverse
, чтобы вертикальное направление начиналось с противоположной стороны.
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
<div> <div>Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> </div> <div> <div>Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> </div>
Для flex-direction
также есть отзывчивые вариации.
.flex-row
.flex-row-reverse
.flex-column
.flex-column-reverse
.flex-sm-row
.flex-sm-row-reverse
.flex-sm-column
. flex-sm-column-reverse
.flex-md-row
.flex-md-row-reverse
.flex-md-column
.flex-md-column-reverse
.flex-lg-row
-
.flex-lg-row-reverse
.flex-lg-column
.flex-lg-column-reverse
.flex-xl-row
.flex-xl-row-reverse
.flex-xl-column
.flex-xl-column-reverse
.flex-xxl-row
.flex-xxl-row-reverse
.flex-xxl-column
.flex-xxl-column-reverse
Выравнивание содержимого
Пользуйтесь утилитами justify-content
или контейнерами флексбокса для изменения выравнивания гибких элементов по главной оси (ось х по умолчанию, ось у – если flex-direction: column
). Выбирайте из start
(умолчание браузера), end
, center
, between
, around
evenly
.Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div>...</div> <div>...</div> <div>...</div> <div>...</div> <div>...</div> <div>...</div>
Responsive variations also exist for justify-content
.
.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around
. justify-content-evenly
.justify-content-sm-start
.justify-content-sm-end
.justify-content-sm-center
.justify-content-sm-between
.justify-content-sm-around
.justify-content-sm-evenly
.justify-content-md-start
.justify-content-md-end
.justify-content-md-center
.justify-content-md-between
.justify-content-md-around
.justify-content-md-evenly
.justify-content-lg-start
.justify-content-lg-end
.justify-content-lg-center
.justify-content-lg-between
.justify-content-lg-around
.justify-content-lg-evenly
.
justify-content-xl-start.justify-content-xl-end
.justify-content-xl-center
.justify-content-xl-between
.justify-content-xl-around
.justify-content-xl-evenly
.justify-content-xxl-start
.justify-content-xxl-end
.justify-content-xxl-center
.justify-content-xxl-between
.justify-content-xxl-around
.justify-content-xxl-evenly
Выравнивание элементов
Используйте утилиты align-items
в контейнерах флексбокса для изменения выравнивания гибких элементов по перекрестной оси (ось Y по умолч., ось X – если flex-direction: column
). Выбирайте из start
, end
, center
, baseline
stretch
(по умолчанию в браузере).Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div>...</div> <div>...</div> <div>...</div> <div>...</div> <div>...</div>
Отзывчивые вариации для align-items
.
.align-items-start
.align-items-end
.align-items-center
.align-items-baseline
.align-items-stretch
.align-items-sm-start
.align-items-sm-end
.align-items-sm-center
.align-items-sm-baseline
.align-items-sm-stretch
.align-items-md-start
. align-items-md-end
.align-items-md-center
.align-items-md-baseline
.align-items-md-stretch
.align-items-lg-start
.align-items-lg-end
.align-items-lg-center
.align-items-lg-baseline
.align-items-lg-stretch
.align-items-xl-start
.align-items-xl-end
.align-items-xl-center
.align-items-xl-baseline
.align-items-xl-stretch
.align-items-xxl-start
.align-items-xxl-end
.align-items-xxl-center
.align-items-xxl-baseline
.align-items-xxl-stretch
Сплошное выравнивание
Используйте утилиты align-self
в гибких элементах для индивидуального изменения их выравнивания по перекрестной оси (ось у по умолч. , ось х – если flex-direction: column
). Выбирайте из таких же параметров, как у align-items
: start
, end
, center
, baseline
или stretch
(умолчание браузера).
Flex item
Aligned flex item
Flex item
Flex item
Aligned flex item
Flex item
Flex item
Aligned flex item
Flex item
Flex item
Aligned flex item
Flex item
Flex item
Aligned flex item
Flex item
<div>Aligned flex item</div> <div>Aligned flex item</div> <div>Aligned flex item</div> <div>Aligned flex item</div> <div>Aligned flex item</div>
Отзывчивые вариации для align-self
.
.align-self-start
.align-self-end
.align-self-center
.align-self-baseline
. align-self-stretch
.align-self-sm-start
.align-self-sm-end
.align-self-sm-center
.align-self-sm-baseline
.align-self-sm-stretch
.align-self-md-start
.align-self-md-end
.align-self-md-center
.align-self-md-baseline
.align-self-md-stretch
.align-self-lg-start
.align-self-lg-end
.align-self-lg-center
.align-self-lg-baseline
.align-self-lg-stretch
.align-self-xl-start
.align-self-xl-end
.align-self-xl-center
.align-self-xl-baseline
.align-self-xl-stretch
. align-self-xxl-start
.align-self-xxl-end
.align-self-xxl-center
.align-self-xxl-baseline
.align-self-xxl-stretch
Заполнение
Используйте класс .flex-fill
в серии вложенных элементов для придания им равной ширины, равной их содержимому (или равную ширину, если их содержимое не превосходит их границы), занимая все доступное горизонтальное пространство.
Flex item with a lot of content
Flex item
Flex item
<div> <div>Flex item with a lot of content</div> <div>Flex item</div> <div>Flex item</div> </div>
Для этого класса также есть адаптивные вариации flex-fill
.
.flex-fill
.flex-sm-fill
.flex-md-fill
.flex-lg-fill
. flex-xl-fill
.flex-xxl-fill
Увеличение и уменьшение
Используйте классы .flex-grow-*
для переключения возможности элемента «расти» и заполнять свободное место. В примере ниже, элементы класса .flex-grow-1
используют все доступное место, которое может, но притом остающимся двум гибким элементам остается необходимое им место.
Flex item
Flex item
Third flex item
<div> <div>Flex item</div> <div>Flex item</div> <div>Third flex item</div> </div>
Используйте классы .flex-shrink-*
для переключения возможности гибких элементов уменьшаться, если необходимо. В примере ниже второй гибкий элемент класса .flex-shrink-1
«принуждается» оборачивать свое содержимое новой строкой, «уменьшаясь» и оставляя больше места для предыдущего гибкого элемента класса .w-100
.
Flex item
Flex item
<div> <div>Flex item</div> <div>Flex item</div> </div>
Для flex-grow
и flex-shrink
также есть адаптивные вариации.
.flex-{grow|shrink}-0
.flex-{grow|shrink}-1
.flex-sm-{grow|shrink}-0
.flex-sm-{grow|shrink}-1
.flex-md-{grow|shrink}-0
.flex-md-{grow|shrink}-1
.flex-lg-{grow|shrink}-0
.flex-lg-{grow|shrink}-1
.flex-xl-{grow|shrink}-0
.flex-xl-{grow|shrink}-1
.flex-xxl-{grow|shrink}-0
.flex-xxl-{grow|shrink}-1
Авто-марджины
Flexbox может делать довольно удивительные вещи, когда Вы смешиваете выравнивание гибкости с автоматическими полями. Ниже показаны три примера управления гибкими элементами через автоматические поля: по умолчанию (без автоматического поля), перемещение двух элементов вправо (.me-auto
) и перемещение двух элементов влево (.ms-auto
) .
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div> <div>Flex item</div> <div>Flex item</div> <div>Flex item</div> </div> <div> <div>Flex item</div> <div>Flex item</div> <div>Flex item</div> </div> <div> <div>Flex item</div> <div>Flex item</div> <div>Flex item</div> </div>
С элементами выравнивания
Передвигайте по вертикали один из гибких элементов к верху или низу контейнера, сочетая align-items
, flex-direction: column
и margin-top: auto
или margin-bottom: auto
.
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div> <div>Flex item</div> <div>Flex item</div> <div>Flex item</div> </div> <div> <div>Flex item</div> <div>Flex item</div> <div>Flex item</div> </div>
Обертка
Изменяйте способ оборачивания гибких элементов в гибком контейнере. Можете совсем не оборачивать их (умолчание браузера) с классом .flex-nowrap
, можете обернуть их классом .flex-wrap
или реверсируйте оборачивание с классом .flex-wrap-reverse
.
Flex item
Flex item
Flex item
Flex item
Flex item
<div> ... </div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div> . .. </div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div> ... </div>
Отзывчивые вариации есть также для flex-wrap
.
.flex-nowrap
.flex-wrap
.flex-wrap-reverse
.flex-sm-nowrap
.flex-sm-wrap
.flex-sm-wrap-reverse
.flex-md-nowrap
.flex-md-wrap
.flex-md-wrap-reverse
.flex-lg-nowrap
.flex-lg-wrap
.flex-lg-wrap-reverse
.flex-xl-nowrap
.flex-xl-wrap
. flex-xl-wrap-reverse
.flex-xxl-nowrap
.flex-xxl-wrap
.flex-xxl-wrap-reverse
Порядок
Измените визуальный порядок определенных гибких элементов с помощью утилит order
. Мы создали параметры лишь для придания элементу первого или последнего порядкового положения, как и для сброса данной настройки для использования порядка DOM. Поскольку order
принимает любое целочисленное значение от 0 до 5, добавьте обычный CSS для создания необходимых дополнительных значений.
First flex item
Second flex item
Third flex item
<div> <div>First flex item</div> <div>Second flex item</div> <div>Third flex item</div> </div>
Отзывчивые вариации есть также для order
.
.order-0
.order-1
. order-2
.order-3
.order-4
.order-5
.order-sm-0
.order-sm-1
.order-sm-2
.order-sm-3
.order-sm-4
.order-sm-5
.order-md-0
.order-md-1
.order-md-2
.order-md-3
.order-md-4
.order-md-5
.order-lg-0
.order-lg-1
.order-lg-2
.order-lg-3
.order-lg-4
.order-lg-5
.order-xl-0
.order-xl-1
.order-xl-2
.order-xl-3
. order-xl-4
.order-xl-5
.order-xxl-0
.order-xxl-1
.order-xxl-2
.order-xxl-3
.order-xxl-4
.order-xxl-5
Кроме того, существуют также адаптивные классы .order-first
и .order-last
, которые изменяют order
, применяя значения order: -1
и order: 6
соответственно.
.order-first
.order-last
.order-sm-first
.order-sm-last
.order-md-first
.order-md-last
.order-lg-first
.order-lg-last
.order-xl-first
.order-xl-last
.order-xxl-first
. order-xxl-last
Выравнивание содержимого
Используйте утилиты align-content
в контейнерах флексбокса, чтобы гибкие элементы выравнивались «вместе» по одной перекрестной оси. Выбирайте из start
(умолчание браузера), end
, center
, between
, around
или stretch
. Чтобы продемонстрировать эти утилиты, мы применили flex-wrap: wrap
и увеличили количество элементов flex.
Внимание! Это свойство не действует на одиночных рядах или одиночных гибких элементах.
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div> ... </div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div>. ..</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div>...</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div>...</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div>...</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div>. ..</div>
Отзывчивые вариации есть также для align-content
.
.align-content-start
.align-content-end
.align-content-center
.align-content-around
.align-content-stretch
.align-content-sm-start
.align-content-sm-end
.align-content-sm-center
.align-content-sm-around
.align-content-sm-stretch
.align-content-md-start
.align-content-md-end
.align-content-md-center
.align-content-md-around
.align-content-md-stretch
.align-content-lg-start
.align-content-lg-end
.align-content-lg-center
. align-content-lg-around
.align-content-lg-stretch
.align-content-xl-start
.align-content-xl-end
.align-content-xl-center
.align-content-xl-around
.align-content-xl-stretch
.align-content-xxl-start
.align-content-xxl-end
.align-content-xxl-center
.align-content-xxl-around
.align-content-xxl-stretch
Медиа объект
Хотите скопировать компонент мультимедийного объекта из Bootstrap 4? В мгновение ока воссоздайте его с помощью нескольких гибких утилит, которые обеспечивают еще большую гибкость и настройку, чем раньше.
PlaceholderИзображение
Это какой-то контент из медиа-компонента. Вы можете заменить его любым содержимым и при необходимости отрегулировать его.
<div> <div> <img src="..." alt="..."> </div> <div> Это какой-то контент из медиа-компонента. Вы можете заменить его любым содержимым и при необходимости отрегулировать его. </div> </div>
And say you want to vertically center the content next to the image:
PlaceholderИзображение
Это какой-то контент из медиа-компонента. Вы можете заменить его любым содержимым и при необходимости отрегулировать его.
<div> <div> <img src="..." alt="..."> </div> <div> Это какой-то контент из медиа-компонента. Вы можете заменить его любым содержимым и при необходимости отрегулировать его. </div> </div>
Sass
API утилит
Утилиты флексбокс объявлены в нашем API утилит в scss/_utilities.scss
. Узнайте, как использовать API утилит.
"flex": ( responsive: true, property: flex, values: (fill: 1 1 auto) ), "flex-direction": ( responsive: true, property: flex-direction, class: flex, values: row column row-reverse column-reverse ), "flex-grow": ( responsive: true, property: flex-grow, class: flex, values: ( grow-0: 0, grow-1: 1, ) ), "flex-shrink": ( responsive: true, property: flex-shrink, class: flex, values: ( shrink-0: 0, shrink-1: 1, ) ), "flex-wrap": ( responsive: true, property: flex-wrap, class: flex, values: wrap nowrap wrap-reverse ), "gap": ( responsive: true, property: gap, class: gap, values: $spacers ), "justify-content": ( responsive: true, property: justify-content, values: ( start: flex-start, end: flex-end, center: center, between: space-between, around: space-around, evenly: space-evenly, ) ), "align-items": ( responsive: true, property: align-items, values: ( start: flex-start, end: flex-end, center: center, baseline: baseline, stretch: stretch, ) ), "align-content": ( responsive: true, property: align-content, values: ( start: flex-start, end: flex-end, center: center, between: space-between, around: space-around, stretch: stretch, ) ), "align-self": ( responsive: true, property: align-self, values: ( auto: auto, start: flex-start, end: flex-end, center: center, baseline: baseline, stretch: stretch, ) ), "order": ( responsive: true, property: order, values: ( first: -1, 0: 0, 1: 1, 2: 2, 3: 3, 4: 4, 5: 5, last: 6, ), ),
Как установить пространство между flexbox?
< > |
css - Создание пространства между гибкими элементами во вложенном flexbox
У меня есть вложенная структура flex box, но между flex элементами нет промежутка.
В моем теле css я попытался использовать свойство justify-content
, но оно просто не работает.
.navbar-контейнер{ дисплей: гибкий; flex-wrap: обернуть; выравнивание содержимого: пространство вокруг; } .nav-ссылки{ дисплей: гибкий; выровнять содержание:пробел между; }
- css
- flexbox
Установить ширину навигационных ссылок или использовать столбец-промежуток
.navbar-container { дисплей: гибкий; flex-wrap: обернуть; выравнивание содержимого: пространство вокруг; } .nav-ссылки { ширина: 300 пикселей; // зазор между столбцами: 30px; дисплей: гибкий; выравнивание содержимого: пробел между; }
<голова> <мета-кодировка="UTF-8">Документ <тело> <дел> <дел> /media/logo.svg" alt="логотип">