Flexbox
Быстро управляйте макетами, выравниванием и размерами столбцов сетки, навигацией, компонентами и т. д. с полным набором гибких утилит flexbox. Для более сложных реализаций может понадобиться настраиваемый CSS.
Включить поведение flex
Применяйте display утилиты для создания контейнера flexbox и преобразования прямых дочерних элементов в элементы flex. Flex-контейнеры и элементы могут быть дополнительно модифицированы с дополнительными свойствами flex.
<div class="d-flex p-2">Это flexбокс контейнер!</div><div class="d-inline-flex p-2">Это встроенный flexбокс контейнер!</div>Также имеются адаптивные вариации для .d-flex и .d-inline-flex.
.d-flex.d-inline-flex.d-sm-flex.d-sm-inline-flex.d-md-flex.d-md-inline-flex.d-lg-flex.d-lg-inline-flex.d-xl-flex.d-xl-inline-flex
Направление
Задайте направление flex элементов в flex контейнере с помощью утилит направления. В большинстве случаев здесь можно опустить горизонтальный класс, поскольку по умолчанию используется row. Однако вы можете столкнуться с ситуациями, когда вам нужно явно задать это значение (например, адаптивные макеты).
Используйте .flex-row, чтобы установить горизонтальное направление (по умолчанию браузер), или .flex-row-reverse, чтобы начать горизонтальное направление с противоположной стороны.
<div class="d-flex flex-row">
<div class="p-2">Элемент flex 1</div>
<div class="p-2">Элемент flex 2</div>
<div class="p-2">Элемент flex 3</div>
</div>
<div class="d-flex flex-row-reverse">
<div class="p-2">Элемент flex 1</div>
<div class="p-2">Элемент flex 2</div>
<div class="p-2">Элемент flex 3</div>
</div>Используйте .flex-column, чтобы установить вертикальное направление, или .flex-column-reverse, чтобы начать вертикальное направление с противоположной стороны.
<div class="d-flex flex-column">
<div class="p-2">Элемент flex 1</div>
<div class="p-2">Элемент flex 2</div>
<div class="p-2">Элемент flex 3</div>
</div>
<div class="d-flex flex-column-reverse">
<div class="p-2">Элемент flex 1</div>
<div class="p-2">Элемент flex 2</div>
<div class="p-2">Элемент flex 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
Выровнять содержимое
Используйте утилиты justify-content для контейнеров flexbox, чтобы изменить выравнивание элементов flex на главной оси (ось x для начала, ось y, если flex-direction: column). Выберите из 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>Адаптивные вариации также существуют для justify-content.
.justify-content-start.justify-content-end.justify-content-center.justify-content-between.justify-content-around.justify-content-sm-start.justify-content-sm-end.justify-content-sm-center.justify-content-sm-between.justify-content-sm-around.justify-content-md-start.justify-content-md-end.justify-content-md-center.justify-content-md-between.justify-content-md-around.justify-content-lg-start.justify-content-lg-end.justify-content-lg-center.justify-content-lg-between.justify-content-lg-around.justify-content-xl-start.justify-content-xl-end.justify-content-xl-center.justify-content-xl-between.justify-content-xl-around
Выровнять позиции
Используйте утилиты align-items для контейнеров flexbox, чтобы изменить выравнивание элементов flex на поперечной оси (ось y для начала, ось x, если направление flex-direction: column). Выбирайте из start, end, center, baseline, или 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-baseline">...</div>
<div class="d-flex align-items-stretch">...</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-self для элементов flexbox, чтобы индивидуально изменить их выравнивание по поперечной оси (ось y для начала, ось x, если направление flex-direction: column). Выберите те же параметры, что и для элементов align-items: start, end, center, baseline, или stretch (по умолчанию для браузера).
<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">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
Авто поля
Flexbox может сделать некоторые довольно удивительные вещи, когда вы смешиваете flex выравнивания с авто полями.
С justify-content
Легко перемещайте все элементы flex в одну сторону, но держите другую на противоположном конце, смешивая justify-content с margin-right: auto или margin-left: auto.
<div class="d-flex justify-content-end">
<div class="mr-auto p-2">Flex элемент</div>
<div class="p-2">Flex элемент</div>
<div class="p-2">Flex элемент</div>
</div>
<div class="d-flex justify-content-start">
<div class="p-2">Flex элемент</div>
<div class="p-2">Flex элемент</div>
<div class="ml-auto p-2">Flex элемент</div>
</div>С align-элементами
Аналогичным образом перемещайте один элемент flex в верхнюю или нижнюю часть контейнера, смешивая align-items, flex-direction: column, и margin-top: auto или margin-bottom: auto.
<div class="d-flex align-items-start flex-column" style="height: 200px;">
<div class="mb-auto p-2">Flex элемент</div>
<div class="p-2">Flex элемент</div>
<div class="p-2">Flex элемент</div>
</div>
<div class="d-flex align-items-end flex-column" style="height: 200px;">
<div class="p-2">Flex элемент</div>
<div class="p-2">Flex элемент</div>
<div class="mt-auto p-2">Flex элемент</div>
</div>Обертка
Измените способ обертки элементов flex в контейнере flex. Выберите вариант без обертки (по умолчанию для браузера) с .flex-nowrap, вариант с оберткой с помощью .flex-wrap, или обратную обертку с помощью .flex-wrap-reverse.
<div class="d-flex flex-nowrap">
...
</div><div class="d-flex flex-wrap">
...
</div><div class="d-flex flex-wrap-reverse">
...
</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 с помощью нескольких утилит order. Мы предоставляем только опции для создания элемента первым или последним, а также для сброса использования порядка DOM. Поскольку order принимает любое целочисленное значение (например, 5), добавьте настраиваемый CSS для любых дополнительных значений.
<div class="d-flex flex-nowrap">
<div class="flex-last p-2">Первый flex элемент</div>
<div class="p-2">Второй flex элемент</div>
<div class="flex-first p-2">Третий flex элемент</div>
</div>Также существуют адаптивные вариации для order.
.order-first.order-last.order-unordered.order-sm-first.order-sm-last.order-sm-unordered.order-md-first.order-md-last.order-md-unordered.order-lg-first.order-lg-last.order-lg-unordered.order-xl-first.order-xl-last.order-xl-unordered
Выровнять контент
Используйте утилиты align-content для контейнеров flexbox, чтобы выровнять элементы flex вместе на поперечной оси. Выберите из start (по умолчанию для браузера), end, center, between, around, или stretch. Чтобы продемонстрировать эти утилиты, мы применили flex-wrap: wrap и увеличили количество элементов flex.
Берегитесь! Это свойство не влияет на отдельные строки элементов flex.
<div class="d-flex align-content-start flex-wrap">
...
</div><div class="d-flex align-content-end flex-wrap">...</div><div class="d-flex align-content-center flex-wrap">...</div><div class="d-flex align-content-between flex-wrap">...</div><div class="d-flex align-content-around flex-wrap">...</div><div class="d-flex align-content-stretch flex-wrap">...</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