Гибкая компоновка

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

Включение свойств гибкой компоновки

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

<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>

<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</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

Направление

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

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

<div class="d-flex flex-row bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

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

<div class="d-flex flex-column bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 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 для контейнеров гибкой компоновки, чтобы изменить выравнивание элементов гибкой компоновки по основной оси (по оси 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 для контейнеров гибкой компоновки, чтобы изменить выравнивание элементов гибкой компоновки по поперечной оси (по оси 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 для элементов гибкой компоновки, чтобы индивидуально изменить их выравнивание по поперечной оси (по оси 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

Заполнение

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

<div class="d-flex bd-highlight">
  <div class="p-2 flex-fill bd-highlight">Flex item with a lot of content</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
</div>

Адаптивные вариации также существуют для flex-fill.

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

Масштабирование и сжатие

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

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

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

<div class="d-flex bd-highlight">
  <div class="p-2 w-100 bd-highlight">Flex item</div>
  <div class="p-2 flex-shrink-1 bd-highlight">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

Автоматические отступы

Гибкая компоновка может выполнять довольно впечатляющие задачи, когда вы комбинируете выравнивание гибкой компоновки с автоматическими отступами. Ниже приведены три примера управления элементами гибкой компоновки с помощью автоматических отступов: по умолчанию (без автоматического отступа), перемещение двух элементов вправо (.mr-auto) и перемещение двух элементов влево (.ml-auto).

К сожалению, IE10 и IE11 не поддерживают автоматические отступы для элементов гибкой компоновки, родительский элемент которых имеет нестандартное значение justify-content. См. этот ответ на StackOverflow для получения более подробной информации.

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

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

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

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

Перемещайте один элемент гибкой компоновки в верхнюю или нижнюю часть контейнера, комбинируя 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">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

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

Порядок

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

<div class="d-flex flex-nowrap bd-highlight">
  <div class="order-3 p-2 bd-highlight">First flex item</div>
  <div class="order-2 p-2 bd-highlight">Second flex item</div>
  <div class="order-1 p-2 bd-highlight">Third flex item</div>
</div>

Варианты адаптивного отображения также существуют для order.

• .order-0
• .order-1
• .order-2
• .order-3
• .order-4
• .order-5
• .order-6
• .order-7
• .order-8
• .order-9
• .order-10
• .order-11
• .order-12
• .order-sm-0
• .order-sm-1
• .order-sm-2
• .order-sm-3
• .order-sm-4
• .order-sm-5
• .order-sm-6
• .order-sm-7
• .order-sm-8
• .order-sm-9
• .order-sm-10
• .order-sm-11
• .order-sm-12
• .order-md-0
• .order-md-1
• .order-md-2
• .order-md-3
• .order-md-4
• .order-md-5
• .order-md-6
• .order-md-7
• .order-md-8
• .order-md-9
• .order-md-10
• .order-md-11
• .order-md-12
• .order-lg-0
• .order-lg-1
• .order-lg-2
• .order-lg-3
• .order-lg-4
• .order-lg-5
• .order-lg-6
• .order-lg-7
• .order-lg-8
• .order-lg-9
• .order-lg-10
• .order-lg-11
• .order-lg-12
• .order-xl-0
• .order-xl-1
• .order-xl-2
• .order-xl-3
• .order-xl-4
• .order-xl-5
• .order-xl-6
• .order-xl-7
• .order-xl-8
• .order-xl-9
• .order-xl-10
• .order-xl-11
• .order-xl-12

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

Используйте утилиты 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