Flex
Швидко керуйте макетом, вирівнюванням і розміром стовпців сітки, навігацією, компонентами тощо за допомогою повного набору адаптивних утиліт flexbox. Для більш складних реалізацій може знадобитися спеціальний CSS.
Увімкнути гнучку поведінку
Застосуйте display
утиліти для створення контейнера flexbox і перетворення прямих дочірніх елементів у елементи flex. Гнучкі контейнери та предмети можна додатково модифікувати за допомогою додаткових властивостей гнучкості.
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
<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
для початку горизонтального напрямку з протилежного боку.
<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
для початку вертикального напрямку з протилежного боку.
<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 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
елементи використовують весь доступний простір, але залишають необхідний простір двом іншим елементам.
<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 може робити деякі чудові речі, коли ви поєднуєте гнучкі вирівнювання з автоматичними полями. Нижче наведено три приклади керування гнучкими елементами за допомогою автоматичних полів: за замовчуванням (без автоматичного поля), натискання двох елементів праворуч ( .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
Вертикально перемістіть один гнучкий елемент у верхню або нижню частину контейнера, змішуючи 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-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 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
та збільшили кількість гнучких елементів.
Голови вгору! Ця властивість не впливає на окремі рядки гнучких елементів.
<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-between
.align-content-around
.align-content-stretch
.align-content-sm-start
.align-content-sm-end
.align-content-sm-center
.align-content-sm-between
.align-content-sm-around
.align-content-sm-stretch
.align-content-md-start
.align-content-md-end
.align-content-md-center
.align-content-md-between
.align-content-md-around
.align-content-md-stretch
.align-content-lg-start
.align-content-lg-end
.align-content-lg-center
.align-content-lg-between
.align-content-lg-around
.align-content-lg-stretch
.align-content-xl-start
.align-content-xl-end
.align-content-xl-center
.align-content-xl-between
.align-content-xl-around
.align-content-xl-stretch