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

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

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

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

Я контейнер flexbox!
html
<div class="d-flex p-2">Я контейнер flexbox!</div>
Я встроенный контейнер flexbox!
html
<div class="d-inline-flex p-2">Я встроенный контейнер 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

Направление

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

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

Flex элемент 1
Flex элемент 2
Flex элемент 3
Flex элемент 1
Flex элемент 2
Flex элемент 3
html
  <div class="d-flex flex-row mb-3">
  <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
html
<div class="d-flex flex-column mb-3">
  <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
  • .flex-xxl-row
  • .flex-xxl-row-reverse
  • .flex-xxl-column
  • .flex-xxl-column-reverse

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

Используйте утилиты justify-content на flexbox-контейнерах для изменения выравнивания flex-элементов по главной оси (x-ось для начала, y-ось если flex-direction: column). Выбирайте из start (по умолчанию в браузере), end, center, between, around или evenly.

Justify
Content
Start
Justify
Content
End
Justify
Content
Center
Justify
Content
Between
Justify
Content
Around
Justify
Content
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-контейнерах для изменения выравнивания 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-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). Выбирайте из тех же опций, что и для 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 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
  • .align-self-xxl-start
  • .align-self-xxl-end
  • .align-self-xxl-center
  • .align-self-xxl-baseline
  • .align-self-xxl-stretch

Заполнение

Используйте класс .flex-fill на серии родственных элементов, чтобы принудить их к ширинам, равным их содержимому (или равным ширинам, если их содержимое не превышает их граничные блоки), занимая все доступное горизонтальное пространство.

Flex элемент с большим количеством содержимого
Flex элемент
Flex элемент
html
<div class="d-flex">
  <div class="p-2 flex-fill">Flex элемент с большим количеством содержимого</div>
  <div class="p-2 flex-fill">Flex элемент</div>
  <div class="p-2 flex-fill">Flex элемент</div>
</div>

Отзывчивые варианты также существуют для flex-fill.

  • .flex-fill
  • .flex-sm-fill
  • .flex-md-fill
  • .flex-lg-fill
  • .flex-xl-fill
  • .flex-xxl-fill

Рост и сжатие

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

Flex item
Flex item
Third flex item
html
<div class="d-flex">
  <div class="p-2 flex-grow-1">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Third flex item</div>
</div>

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

Flex item
Flex item
html
<div class="d-flex">
  <div class="p-2 w-100">Flex item</div>
  <div class="p-2 flex-shrink-1">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 может делать довольно потрясающие вещи, когда вы смешиваете flex-выравнивание с автоматическими отступами. Ниже показаны три примера управления flex-элементами через автоматические отступы: по умолчанию (без автоматических отступов), сдвиг двух элементов вправо (.me-auto) и сдвиг двух элементов влево (.ms-auto).

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
html
<div class="d-flex mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex mb-3">
  <div class="me-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ms-auto p-2">Flex item</div>
</div>

С align-items

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

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
html
<div class="d-flex align-items-start flex-column mb-3" style="height: 200px;">
  <div class="mb-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex align-items-end flex-column mb-3" style="height: 200px;">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="mt-auto p-2">Flex item</div>
</div>

Обертывание

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

Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex flex-nowrap">
  ...
</div>
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 10
Flex item 11
Flex item 12
Flex item 13
Flex item 14
<div class="d-flex flex-wrap">
  ...
</div>
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 10
Flex item 11
Flex item 12
Flex item 13
Flex item 14
<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

Порядок

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

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

Обратите внимание! Это свойство не оказывает влияния на одиночные строки 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 class="d-flex align-content-start flex-wrap">
  ...
</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 class="d-flex align-content-end flex-wrap">...</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 class="d-flex align-content-center flex-wrap">...</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 class="d-flex align-content-between flex-wrap">...</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 class="d-flex align-content-around flex-wrap">...</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 class="d-flex align-content-stretch flex-wrap">...</div>

Отзывчивые варианты также существуют для align-content.

  • .align-content-start
  • .align-content-end
  • .align-content-center
  • .align-content-between
  • .align-content-around
  • .align-content-stretch
  • .align-content-sm-start
  • .align-content-sm-end
  • .align-content-sm-center
  • .align-content-sm-between
  • .align-content-sm-around
  • .align-content-sm-stretch
  • .align-content-md-start
  • .align-content-md-end
  • .align-content-md-center
  • .align-content-md-between
  • .align-content-md-around
  • .align-content-md-stretch
  • .align-content-lg-start
  • .align-content-lg-end
  • .align-content-lg-center
  • .align-content-lg-between
  • .align-content-lg-around
  • .align-content-lg-stretch
  • .align-content-xl-start
  • .align-content-xl-end
  • .align-content-xl-center
  • .align-content-xl-between
  • .align-content-xl-around
  • .align-content-xl-stretch
  • .align-content-xxl-start
  • .align-content-xxl-end
  • .align-content-xxl-center
  • .align-content-xxl-between
  • .align-content-xxl-around
  • .align-content-xxl-stretch

Медиа-объект

Хотите повторить компонент media object из Bootstrap 4? Воссоздайте его в мгновение ока с помощью нескольких flex-утилит, которые позволяют еще больше гибкости и настройки, чем раньше.

PlaceholderImage
Это содержимое из медиа-компонента. Вы можете заменить его любым содержимым и настроить по необходимости.
html
<div class="d-flex">
  <div class="flex-shrink-0">
    <img src="..." alt="...">
  </div>
  <div class="flex-grow-1 ms-3">
    Это содержимое из медиа-компонента. Вы можете заменить его любым содержимым и настроить по необходимости.
  </div>
</div>

А скажем, вы хотите вертикально выровнять содержимое рядом с изображением:

PlaceholderImage
Это содержимое из медиа-компонента. Вы можете заменить его любым содержимым и настроить по необходимости.
html
<div class="d-flex align-items-center">
  <div class="flex-shrink-0">
    <img src="..." alt="...">
  </div>
  <div class="flex-grow-1 ms-3">
    Это содержимое из медиа-компонента. Вы можете заменить его любым содержимым и настроить по необходимости.
  </div>
</div>

CSS

API утилит Sass

Утилиты Flexbox объявлены в нашем 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
),
"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,
  ),
),