Flex

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

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

<div class="d-flex p-2">Я - контейнер flexbox!</div>

<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 с помощью утилит direction. В большинстве случаев вы можете не указывать класс horizontal, поскольку в браузере используется значение по умолчанию row. Однако вы можете столкнуться с ситуациями, когда вам необходимо явно установить это значение (например, адаптивные макеты).

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

<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 для начала вертикального направления с противоположной стороны.

<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

Используйте утилиты justify-content в контейнерах flexbox, чтобы изменить выравнивание элементов flex по главной оси (ось 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-itemsflex-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). Выберите один из тех же вариантов, что и align-items: start, end, center, baseline или stretch (браузер по умолчанию).

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

<div class="d-flex">
  <div class="p-2 flex-grow-1">Flex элемент</div>
  <div class="p-2">Flex элемент</div>
  <div class="p-2">Третий flex элемент</div>
</div>

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

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

<div class="d-flex mb-3">
  <div class="p-2">Flex элемент</div>
  <div class="p-2">Flex элемент</div>
  <div class="p-2">Flex элемент</div>
</div>

<div class="d-flex mb-3">
  <div class="me-auto p-2">Flex элемент</div>
  <div class="p-2">Flex элемент</div>
  <div class="p-2">Flex элемент</div>
</div>

<div class="d-flex mb-3">
  <div class="p-2">Flex элемент</div>
  <div class="p-2">Flex элемент</div>
  <div class="ms-auto p-2">Flex элемент</div>
</div>

С элементами выравнивания

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

<div class="d-flex align-items-start flex-column mb-3" 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 mb-3" 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-xxl-nowrap
• .flex-xxl-wrap
• .flex-xxl-wrap-reverse

Заказать

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

<div class="d-flex flex-nowrap">
  <div class="order-3 p-2">Первый flex элемент</div>
  <div class="order-2 p-2">Второй flex элемент</div>
  <div class="order-1 p-2">Третий flex элемент</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.

<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-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, которые обеспечивают еще большую гибкость и кастомизацию, чем раньше.

<div class="d-flex">
  <div class="flex-shrink-0">
    <img src="..." alt="...">
  </div>
  <div class="flex-grow-1 ms-3">
    This is some content from a media component. You can replace this with any content and adjust it as needed.
  </div>
</div>

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

<div class="d-flex align-items-center">
  <div class="flex-shrink-0">
    <img src="..." alt="...">
  </div>
  <div class="flex-grow-1 ms-3">
    This is some content from a media component. You can replace this with any content and adjust it as needed.
  </div>
</div>

CSS

API утилит Sass

Утилиты Flexbox объявлены в нашем utilities API в scss/_utilities.scss. Узнайте, как использовать utilities 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,
  ),
),