Перейти к основному содержанию Перейти к навигации по документации

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

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

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

Я контейнер Flexbox!
<div class="d-flex p-2 bd-highlight">Я контейнер Flexbox!</div>
Я встроенный контейнер Flexbox!
<div class="d-inline-flex p-2 bd-highlight">Я встроенный контейнер Flexbox!</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
  • .d-xxl-flex
  • .d-xxl-inline-flex

Направление

Задайте направление гибких элементов в гибком контейнере с помощью утилит направления. В большинстве случаев Вы можете опустить здесь горизонтальный класс, так как браузер по умолчанию равен row. Однако Вы можете столкнуться с ситуациями, когда Вам нужно явно установить это значение (например, адаптивные макеты).

Используйте .flex-row, чтобы установить горизонтальное направление (по умолчанию в браузере), или .flex-row-reverse, чтобы начать горизонтальное направление с противоположной стороны.

Флекс элемент 1
Флекс элемент 2
Флекс элемент 3
Флекс элемент 1
Флекс элемент 2
Флекс элемент 3
<div class="d-flex flex-row bd-highlight mb-3">
  <div class="p-2 bd-highlight">Флекс элемент 1</div>
  <div class="p-2 bd-highlight">Флекс элемент 2</div>
  <div class="p-2 bd-highlight">Флекс элемент 3</div>
</div>
<div class="d-flex flex-row-reverse bd-highlight">
  <div class="p-2 bd-highlight">Флекс элемент 1</div>
  <div class="p-2 bd-highlight">Флекс элемент 2</div>
  <div class="p-2 bd-highlight">Флекс элемент 3</div>
</div>

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

Флекс элемент 1
Флекс элемент 2
Флекс элемент 3
Флекс элемент 1
Флекс элемент 2
Флекс элемент 3
<div class="d-flex flex-column bd-highlight mb-3">
  <div class="p-2 bd-highlight">Флекс элемент 1</div>
  <div class="p-2 bd-highlight">Флекс элемент 2</div>
  <div class="p-2 bd-highlight">Флекс элемент 3</div>
</div>
<div class="d-flex flex-column-reverse bd-highlight">
  <div class="p-2 bd-highlight">Флекс элемент 1</div>
  <div class="p-2 bd-highlight">Флекс элемент 2</div>
  <div class="p-2 bd-highlight">Флекс элемент 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 в контейнерах flexbox, чтобы изменить выравнивание элементов Флекс по главной оси (ось x для начала, ось y, если flex-direction: column). Выберите start (по умолчанию в браузере), end, center, between, around или evenly.

Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
<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>
<div class="d-flex justify-content-evenly">...</div>

Адаптивные варианты также существуют для 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 на контейнерах flexbox, чтобы изменить выравнивание элементов Флекс по поперечной оси (ось 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-items-xxl-start
  • .align-items-xxl-end
  • .align-items-xxl-center
  • .align-items-xxl-baseline
  • .align-items-xxl-stretch

Выравнивание себя

Используйте утилиты align-self для элементов flexbox, чтобы индивидуально изменить их выравнивание по поперечной оси (ось Y для начала, ось X, если flex-direction: column). Выберите один из тех же параметров, что и flex-direction: column). Выберите один из тех же вариантов, что и align-items: start, end, center, baseline или stretch (по умолчанию в браузере).

Флекс элемент
Выровненный Флекс элемент
Флекс элемент
Флекс элемент
Выровненный Флекс элемент
Флекс элемент
Флекс элемент
Выровненный Флекс элемент
Флекс элемент
Флекс элемент
Выровненный Флекс элемент
Флекс элемент
Флекс элемент
Выровненный Флекс элемент
Флекс элемент
<div class="align-self-start">Выровненный Флекс элемент</div>
<div class="align-self-end">Выровненный Флекс элемент</div>
<div class="align-self-center">Выровненный Флекс элемент</div>
<div class="align-self-baseline">Выровненный Флекс элемент</div>
<div class="align-self-stretch">Выровненный Флекс элемент</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 для серии родственных элементов, чтобы заставить их ширину равную их содержимому (или равную ширину, если их содержимое не превышает их границы), занимая при этом все доступное горизонтальное пространство.

Флекс элемент с большим количеством контента
Флекс элемент
Флекс элемент
<div class="d-flex bd-highlight">
  <div class="p-2 flex-fill bd-highlight">Флекс элемент с большим количеством контента</div>
  <div class="p-2 flex-fill bd-highlight">Флекс элемент</div>
  <div class="p-2 flex-fill bd-highlight">Флекс элемент</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 используют все доступное пространство, которое могут, а оставшимся двум элементам Флекс их необходимое пространство.

Флекс элемент
Флекс элемент
Third Флекс элемент
<div class="d-flex bd-highlight">
  <div class="p-2 flex-grow-1 bd-highlight">Флекс элемент</div>
  <div class="p-2 bd-highlight">Флекс элемент</div>
  <div class="p-2 bd-highlight">Third Флекс элемент</div>
</div>

Используйте утилиты .flex-shrink-* для переключения способности элемента Флекс сжиматься при необходимости. В приведенном ниже примере второй элемент Флекс с .flex-shrink-1 принудительно переносит свое содержимое в новую строку, «сжимаясь», чтобы освободить место для предыдущего элемента Флекс с .w-100.

Флекс элемент
Флекс элемент
<div class="d-flex bd-highlight">
  <div class="p-2 w-100 bd-highlight">Флекс элемент</div>
  <div class="p-2 flex-shrink-1 bd-highlight">Флекс элемент</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) .

Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
<div class="d-flex bd-highlight mb-3">
  <div class="p-2 bd-highlight">Флекс элемент</div>
  <div class="p-2 bd-highlight">Флекс элемент</div>
  <div class="p-2 bd-highlight">Флекс элемент</div>
</div>

<div class="d-flex bd-highlight mb-3">
  <div class="me-auto p-2 bd-highlight">Флекс элемент</div>
  <div class="p-2 bd-highlight">Флекс элемент</div>
  <div class="p-2 bd-highlight">Флекс элемент</div>
</div>

<div class="d-flex bd-highlight mb-3">
  <div class="p-2 bd-highlight">Флекс элемент</div>
  <div class="p-2 bd-highlight">Флекс элемент</div>
  <div class="ms-auto p-2 bd-highlight">Флекс элемент</div>
</div>

С помощью align-items

Вертикально переместите один элемент Флекс вверх или вниз контейнера, смешав align-items, flex-direction: column и margin-top: auto или margin-bottom: auto.

Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
<div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;">
  <div class="mb-auto p-2 bd-highlight">Флекс элемент</div>
  <div class="p-2 bd-highlight">Флекс элемент</div>
  <div class="p-2 bd-highlight">Флекс элемент</div>
</div>

<div class="d-flex align-items-end flex-column bd-highlight mb-3" style="height: 200px;">
  <div class="p-2 bd-highlight">Флекс элемент</div>
  <div class="p-2 bd-highlight">Флекс элемент</div>
  <div class="mt-auto p-2 bd-highlight">Флекс элемент</div>
</div>

Обертка

Измените способ обертки элементов Флекс в гибкий контейнер. Выберите полное отсутствие переноса (по умолчанию в браузере) с помощью .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-xxl-nowrap
  • .flex-xxl-wrap
  • .flex-xxl-wrap-reverse

Порядок

Измените визуальный порядок определенных элементов Флекс с помощью нескольких утилит order. Мы предоставляем только варианты создания элемента первым или последним, а также сброс для использования порядка DOM. Поскольку order принимает любое целочисленное значение от 0 до 5, добавьте собственный CSS для любых дополнительных значений.

First Флекс элемент
Second Флекс элемент
Third Флекс элемент
<div class="d-flex flex-nowrap bd-highlight">
  <div class="order-3 p-2 bd-highlight">First Флекс элемент</div>
  <div class="order-2 p-2 bd-highlight">Second Флекс элемент</div>
  <div class="order-1 p-2 bd-highlight">Third Флекс элемент</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 на контейнерах flexbox для выравнивания элементов Флекс вместе по поперечной оси. Выберите start (по умолчанию для браузера), end, center, between, around или stretch. Чтобы продемонстрировать эти утилиты, мы ввели в действие flex-wrap: wrap и увеличили количество элементов Флекс.

Внимание! Это свойство не влияет на отдельные строки элементов Флекс.

Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
Флекс элемент
<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
  • .align-content-xxl-start
  • .align-content-xxl-end
  • .align-content-xxl-center
  • .align-content-xxl-around
  • .align-content-xxl-stretch