Макет Bootstrap5 Flex (Flexbox)

Bootstrap5 использует flex-классы для управления макетом страницы.

Flexbox

Самое большое различие между Bootstrap 3 и Bootstrap 4/5 заключается в том, что Bootstrap 4/5 использует Flexbox для макета вместо использования float.

Flexbox — это новый режим макета в CSS3, более подходящий для адаптивного дизайна. Если вы ещё не понимаете flex, вы можете прочитать нашCSS3 Flexible Box (Flex Box)учебник

Примечание: IE9 и ниже не поддерживают flexbox, поэтому если вам нужно поддерживать IE8-9, пожалуйста, используйтеBootstrap 3。

В следующем примере используется класс d-flex для создания flexbox-контейнера и задаются три flex-элемента:

Пример

<div class="d-flex p-3 bg-secondary text-white"> <div class="p-2 bg-info">Flex-элемент 1</div> <div class="p-2 bg-warning">Flex-элемент 2</div> <div class="p-2 bg-primary">Flex-элемент 3</div> </div>

Попробуйте »

Вы можете использовать класс d-inline-flex для создания flexbox-контейнера, который отображается в одной строке:

Пример

<div class="d-inline-flex p-3 bg-secondary text-white"> <div class="p-2 bg-info">Flex-элемент 1</div> <div class="p-2 bg-warning">Flex-элемент 2</div> <div class="p-2 bg-primary">Flex-элемент 3</div> </div>

Попробуйте »

Horizontal

.flex-rowВы можете задать отображение flex-элементов горизонтально, что является значением по умолчанию.

Используйте.flex-row-reverseкласс используется для установки отображения с выравниванием по правому краю, т.е. с.flex-rowв противоположном направлении.

Пример

<div class="d-flex flex-row bg-secondary"> <div class="p-2 bg-info">Flex-элемент 1</div> <div class="p-2 bg-warning">Flex-элемент 2</div> <div class="p-2 bg-primary">Flex-элемент 3</div> </div> <div class="d-flex flex-row-reverse bg-secondary"> <div class="p-2 bg-info">Flex-элемент 1</div> <div class="p-2 bg-warning">Flex-элемент 2</div> <div class="p-2 bg-primary">Flex-элемент 3</div> </div>

Попробуйте »

Vertical

.flex-columnкласс используется для установки вертикального отображения flex-элементов,.flex-column-reverseиспользуется для обратного порядка элементов:

Пример

<div class="d-flex flex-column"> <div class="p-2 bg-info">Flex-элемент 1</div> <div class="p-2 bg-warning">Flex-элемент 2</div> <div class="p-2 bg-primary">Flex-элемент 3</div> </div> <div class="d-flex flex-column-reverse"> <div class="p-2 bg-info">Flex-элемент 1</div> <div class="p-2 bg-warning">Flex-элемент 2</div> <div class="p-2 bg-primary">Flex-элемент 3</div> </div>

Попробуйте »

Выравнивание по главной оси

.justify-content-*класс используется для изменения расположения flex-элементов,*Допустимые значения:start (по умолчанию), end, center, between или around:

Пример

<div class="d-flex justify-content-start">...</div> <div class="d-flex justify-content-end">...</div> <div class="d-flex justify-content-center">...</div> <div class="d-flex justify-content-between">...</div> <div class="d-flex justify-content-around">...</div>

Попробуйте »

Равная ширина

Класс .flex-fill заставляет каждый flex-элемент иметь одинаковую ширину:

Пример

<div class="d-flex"> <div class="p-2 bg-info flex-fill">Flex-элемент 1</div> <div class="p-2 bg-warning flex-fill">Flex-элемент 2</div> <div class="p-2 bg-primary flex-fill">Flex-элемент 3</div> </div>

Попробуйте »

Увеличение

.flex-grow-1 используется для того, чтобы задать элементу использование оставшегося пространства. В следующем примере первые два элемента занимают только необходимое им пространство, а последний занимает оставшееся пространство. :

Пример

<div class="d-flex"> <div class="p-2 bg-info">Flex-элемент 1</div> <div class="p-2 bg-warning">Flex-элемент 2</div> <div class="p-2 bg-primary flex-grow-1">Flex-элемент 3</div> </div>

Попробуйте »

Совет:Используйте.flex-shrink-1чтобы задать правила сжатия для элементов.

Порядок

.orderкласс может задавать порядок flex-элементов, от.order-1до.order-12, чем меньше число, тем выше приоритет (.order-1размещается.order-2перед) :

Пример

<div class="d-flex bg-secondary"> <div class="p-2 bg-info order-3">Flex-элемент 1</div> <div class="p-2 bg-warning order-2">Flex-элемент 2</div> <div class="p-2 bg-primary order-1">Flex-элемент 3</div> </div>

Попробуйте »

Отступы

.ms-autoкласс может установить правый отступ дочернего элемента вauto, i.e.,margin-right: auto!important;，.me-autoкласс может установить левый отступ дочернего элемента вauto, i.e.,margin-left: auto!important;:

Пример

<div class="d-flex mb-3 bg-secondary"> <div class="p-2 ms-auto bg-info">Flex-элемент 1</div> <div class="p-2 bg-warning">Flex-элемент 2</div> <div class="p-2 bg-primary">Flex-элемент 3</div> </div> <div class="d-flex mb-3 bg-secondary"> <div class="p-2 bg-info">Flex-элемент 1</div> <div class="p-2 bg-warning">Flex-элемент 2</div> <div class="p-2 me-auto bg-primary">Flex-элемент 3</div> </div>

Попробуйте »

Wrap

Вы можете использовать следующие три класса для переноса элементов во flex-контейнере: .flex-nowrap (по умолчанию), .flex-wrap или .flex-wrap-reverse. Сделайте flex-контейнер однострочным или многострочным.

Пример

<div class="d-flex flex-wrap">..</div> <div class="d-flex flex-wrap-reverse">..</div> <div class="d-flex flex-nowrap">..</div>

Попробуйте »

Выравнивание содержимого

Мы можем использовать `.align-content-*` для управления тем, как дочерние элементы располагаются по вертикали. Возможные значения: `.align-content-start` (по умолчанию), `.align-content-end`, `.align-content-center`, `.align-content-between`, `.align-content-around` и `.align-content-stretch`.

Эти классы не работают, если есть только один ряд flex-элементов.

Пример

<div class="d-flex flex-wrap align-content-start">..</div> <div class="d-flex flex-wrap align-content-end">..</div> <div class="d-flex flex-wrap align-content-center">..</div> <div class="d-flex flex-wrap align-content-around">..</div> <div class="d-flex flex-wrap align-content-stretch">..</div>

Попробуйте »

Выравнивание элементов

Чтобы выровнять дочерние элементы в одной строке, вы можете использовать.align-items-*классы для управления этим. Возможные значения:`.align-items-start`, `.align-items-end`, `.align-items-center`, `.align-items-baseline` и `.align-items-stretch` (по умолчанию)。

Пример

<div class="d-flex align-items-start">..</div> <div class="d-flex align-items-end">..</div> <div class="d-flex align-items-center">..</div> <div class="d-flex align-items-around">..</div> <div class="d-flex align-items-stretch">..</div>

Попробуйте »

Выравнивание отдельного элемента

Чтобы выровнять конкретный дочерний элемент, вы можете использовать классы `.align-self-*` для управления им. Возможные значения: `.align-self-start`, `.align-self-end`, `.align-self-center`, `.align-self-baseline` и `.align-self-stretch` (по умолчанию).

Пример

<div class="d-flex bg-light" style="height:150px"> <div class="p-2 border">Flex-элемент 1</div> <div class="p-2 border align-self-start">Flex-элемент 2</div> <div class="p-2 border">Flex-элемент 3</div> </div>

Попробуйте »

Адаптивные Flex-классы

Мы можем задавать flex-классы в зависимости от разных устройств, чтобы обеспечить адаптивную вёрстку страницы. `*` в таблице ниже может быть `sm`, `md`, `lg` или `xl`, что соответствует малым устройствам, средним устройствам, большим устройствам и сверхбольшим устройствам.
Класс Пример Реализация
Flex-контейнеры
.d-*-flex Создавайте flexbox-контейнеры для разных экранных устройств Попробуйте
.d-*-inline-flex Создавайте inline flexbox-контейнеры для разных экранных устройств Попробуйте
Direction
.flex-*-row Отображайте flex-элементы горизонтально для разных экранных устройств Попробуйте
.flex-*-row-reverse Отображайте flex-элементы горизонтально и с выравниванием по правому краю для разных экранных устройств Попробуйте
.flex-*-column Отображайте flex-элементы вертикально для разных экранных устройств Попробуйте
.flex-*-column-reverse Отображайте flex-элементы вертикально в обратном порядке для разных экранных устройств Попробуйте
Выравнивание по главной оси
.justify-content-*-start Отображайте flex-элементы в начальной позиции для разных экранных устройств (выравнивание по левому краю) Попробуйте
.justify-content-*-end Отображайте flex-элементы в конце для разных экранных устройств (выравнивание по правому краю) Попробуйте
.justify-content-*-center Центрируйте flex-элементы в flex-контейнере для разных экранных устройств Попробуйте
.justify-content-*-between Используйте "between" для отображения flex-элементов для разных экранных устройств Попробуйте
.justify-content-*-around Используйте "around" для отображения flex-элементов в зависимости от разных экранов устройств Попробуйте
Равная ширина
.flex-*-fill Принудительно устанавливать одинаковую ширину в зависимости от разных экранов устройств Попробуйте
Увеличение
.flex-*-grow-0 Не разрешать растягивание в зависимости от разных экранов устройств  
.flex-*-grow-1 Разрешить растягивание в зависимости от разных экранов устройств  
Shrink
.flex-*-shrink-0 Не разрешать сжатие в зависимости от разных экранов устройств  
.flex-*-shrink-1 Разрешить сжатие в зависимости от разных экранов устройств  
Wrap
.flex-*-nowrap Не переносить flex-элементы в зависимости от разных экранов устройств Попробуйте
.flex-*-wrap Переносить flex-элементы в зависимости от разных экранов устройств Попробуйте
.flex-*-wrap-reverse Обратный перенос flex-элементов в зависимости от разных экранов устройств Попробуйте
Выравнивание содержимого
.align-content-*-start Располагать flex-элементы в начальной позиции в зависимости от разных экранов устройств Попробуйте
.align-content-*-end Располагать flex-элементы в конечной позиции в зависимости от разных экранов устройств Попробуйте
.align-content-*-center Располагать flex-элементы в центральной позиции в зависимости от разных экранов устройств Попробуйте
.align-content-*-around Расположите flex-элементы в стопку, используя "around", в зависимости от разных экранных устройств Попробуйте
.align-content-*-stretch Укладывайте flex-элементы в стопку, растягивая их, в зависимости от разных экранных устройств Попробуйте
Сортировка
.order-*-0-12 Изменение сортировки на небольших размерах экрана Попробуйте
Выравнивание элементов
.align-items-*-start В зависимости от экранного устройства отображайте элементы в одной строке в начале. Попробуйте
.align-items-*-end В зависимости от экранного устройства отображайте элементы в одной строке в конце. Попробуйте
.align-items-*-center В зависимости от экранного устройства отображайте элементы в одной строке по центру. Попробуйте
.align-items-*-baseline В зависимости от экранного устройства отображайте элементы в одной строке по базовой линии. Попробуйте
.align-items-*-stretch В зависимости от экранного устройства растягивайте высоту элементов и отображайте их в одной строке. Попробуйте
Выравнивание одного дочернего элемента
.align-self-*-start В зависимости от экранного устройства отображайте один дочерний элемент в начале. Попробуйте
.align-self-*-end В зависимости от экранного устройства отображайте один дочерний элемент в конце. Попробуйте
.align-self-*-center В зависимости от экранного устройства отображайте один дочерний элемент по центру. Попробуйте
.align-self-*-baseline В зависимости от экрана устройства отображать один дочерний элемент по базовой линии. Попробуйте
.align-self-*-stretch В зависимости от экрана устройства растягивать один дочерний элемент. Попробуйте
Другие расширения