Source

гибкий

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

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

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

Я флексбокс-контейнер!

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

Я встроенный контейнер flexbox!

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

Гибкий элемент 1

Гибкий элемент 2

Гибкий элемент 3

Гибкий элемент 1

Гибкий элемент 2

Гибкий элемент 3

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

Гибкий элемент 1

Гибкий элемент 2

Гибкий элемент 3

Гибкий элемент 1

Гибкий элемент 2

Гибкий элемент 3

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

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

Гибкий элемент

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

Заказ

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

Первый гибкий элемент

Второй гибкий элемент

Третий гибкий элемент

<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-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-элементов.

Гибкий элемент

<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