Flexbox

Быстро управляйте макетами, выравниванием и размерами столбцов сетки, навигацией, компонентами и т. д. с полным набором гибких утилит flexbox. Для более сложных реализаций может понадобиться настраиваемый CSS.

Включить поведение flex

Применяйте display утилиты для создания контейнера flexbox и преобразования прямых дочерних элементов в элементы flex. Flex-контейнеры и элементы могут быть дополнительно модифицированы с дополнительными свойствами flex.

Это flexбокс контейнер!
<div class="d-flex p-2">Это flexбокс контейнер!</div>
Это встроенный flexбокс контейнер!
<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, чтобы начать горизонтальное направление с противоположной стороны.

Элемент flex 1
Элемент flex 2
Элемент flex 3
Элемент flex 1
Элемент flex 2
Элемент flex 3
<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, чтобы начать вертикальное направление с противоположной стороны.

Элемент flex 1
Элемент flex 2
Элемент flex 3
Элемент flex 1
Элемент flex 2
Элемент flex 3
<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.

Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
<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 (по умолчанию для браузера).

Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
<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 (по умолчанию для браузера).

Flex элемент
Aligned flex item
Flex элемент
Flex элемент
Aligned flex item
Flex элемент
Flex элемент
Aligned flex item
Flex элемент
Flex элемент
Aligned flex item
Flex элемент
Flex элемент
Aligned flex item
Flex элемент
<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.

Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
<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.

Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
<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.

Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
<div class="d-flex flex-nowrap">
  ...
</div>
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
<div class="d-flex flex-wrap">
  ...
</div>
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
<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 для любых дополнительных значений.

Первый flex элемент
Второй flex элемент
Третий flex элемент
<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.

Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
<div class="d-flex align-content-end flex-wrap">...</div>
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
<div class="d-flex align-content-center flex-wrap">...</div>
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
<div class="d-flex align-content-between flex-wrap">...</div>
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
<div class="d-flex align-content-around flex-wrap">...</div>
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
<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