Source

гибкий

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

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

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

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

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

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

<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

Направление

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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утилиты в контейнерах 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

Наполнять

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

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

<div class="d-flex bd-highlight">
  <div class="p-2 flex-fill bd-highlight">Flex item</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-элемент .flex-shrink-1принудительно переносит свое содержимое на новую строку, «сжимаясь», чтобы освободить место для предыдущего flex-элемента с .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

Автоматические поля

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

К сожалению, IE10 и IE11 не поддерживают должным образом автоматические поля для flex-элементов, родительский элемент которых имеет значение, отличное от 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-элементов в 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 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-элементов.

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

<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