Source

Flex

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

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

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

Flex елемент 1

Flex item 2

Flex item 3

Flex елемент 1

Flex item 2

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

Flex елемент 1

Flex item 2

Flex item 3

Flex елемент 1

Flex item 2

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

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

Заповнити

Використовуйте .flex-fillклас для серії однотипних елементів, щоб змусити їх отримати ширину, що дорівнює їхньому вмісту (або рівну ширину, якщо їхній вміст не перевищує рамки), займаючи при цьому весь доступний горизонтальний простір.

Гнучкий предмет із великою кількістю вмісту

Flex елемент

<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 збільшуватися, щоб заповнити доступний простір. У наведеному нижче прикладі .flex-grow-1елементи використовують весь доступний простір, але залишають необхідний простір двом іншим елементам.

Flex елемент

Третій елемент гнучкості

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

Flex елемент

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

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

Flex елемент

<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

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

Flex елемент

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

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

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