Flex

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

Увімкнути гнучку поведінку

Застосуйте displayутиліти для створення контейнера flexbox і перетворення прямих дочірніх елементів у елементи 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для початку горизонтального напрямку з протилежного боку.

Flex елемент 1

Flex item 2

Flex item 3

Flex елемент 1

Flex item 2

Flex item 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для початку вертикального напрямку з протилежного боку.

Flex елемент 1

Flex item 2

Flex item 3

Flex елемент 1

Flex item 2

Flex item 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.

Flex елемент

<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(браузер за замовчуванням).

Flex елемент

<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(браузер за замовчуванням).

Flex елемент

Вирівняний гнучкий елемент

Flex елемент

Вирівняний гнучкий елемент

Flex елемент

Вирівняний гнучкий елемент

Flex елемент

Вирівняний гнучкий елемент

Flex елемент

Вирівняний гнучкий елемент

Flex елемент

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

На жаль, IE10 та IE11 не підтримують належним чином автоматичні поля для flex-елементів, батьківський елемент яких має нестандартне justify-contentзначення. Щоб дізнатися більше , перегляньте цю відповідь StackOverflow .

Flex елемент

<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

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

Flex елемент

<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-nowrap, обтікання за допомогою .flex-wrapабо зворотне загортання за допомогою .flex-wrap-reverse.

Flex елемент

<div class="d-flex flex-nowrap">
  ...
</div>

Flex елемент

<div class="d-flex flex-wrap">
  ...
</div>

Flex елемент

<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="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>

Flex елемент

<div class="d-flex align-content-end flex-wrap">...</div>

Flex елемент

<div class="d-flex align-content-center flex-wrap">...</div>

Flex елемент

<div class="d-flex align-content-between flex-wrap">...</div>

Flex елемент

<div class="d-flex align-content-around flex-wrap">...</div>

Flex елемент

<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