Flexbox

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

Содержание

• Содержание
• Включить поведение flex
• Направление
• Выровнять содержимое
• Выровнять элементы
• Выровнять себя
• Авто поля
  • С justify-content
  • С align-элементами
• Обертка
• Порядок
• Выровнять контент

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

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

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

<div class="d-inline-flex p-2">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

Направление

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

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

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

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

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

Авто поля

Flexbox может сделать некоторые довольно удивительные вещи, когда вы смешиваете flex выравнивания с авто полями.

С justify-content

Легко перемещайте все элементы flex в одну сторону, но держите другую на противоположном конце, смешивая justify-content с margin-right: auto или margin-left: auto.

<div class="d-flex justify-content-end">
  <div class="mr-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 justify-content-start">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ml-auto p-2">Flex item</div>
</div>

С align-элементами

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

<div class="d-flex align-items-start flex-column" 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" 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.

<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 с помощью нескольких утилит order. Мы предоставляем только опции для создания элемента первым или последним, а также для сброса для использования порядка DOM. Поскольку order принимает любое целочисленное значение (например, 5), добавьте настраиваемый CSS для любых дополнительных значений.

<div class="d-flex flex-nowrap">
  <div class="flex-last p-2">First flex item</div>
  <div class="p-2">Second flex item</div>
  <div class="flex-first p-2">Third flex item</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.

<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