Flex
Швидко керуйте макетом, вирівнюванням і розміром стовпців сітки, навігацією, компонентами тощо за допомогою повного набору адаптивних утиліт flexbox. Для більш складних реалізацій може знадобитися спеціальний CSS.
Застосуйте display
утиліти для створення контейнера flexbox і перетворення прямих дочірніх елементів у елементи flex. Гнучкі контейнери та предмети можна додатково модифікувати за допомогою додаткових властивостей гнучкості.
Чуйні варіанти також існують для .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-column
для встановлення вертикального напрямку або .flex-column-reverse
для початку вертикального напрямку з протилежного боку.
Чуйні варіанти також існують для 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
.
Чуйні варіанти також існують для 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
(браузер за замовчуванням).
Чуйні варіанти також існують для 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
(браузер за замовчуванням).
Чуйні варіанти також існують для 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-fill
.
.flex-fill
.flex-sm-fill
.flex-md-fill
.flex-lg-fill
.flex-xl-fill
Використовуйте .flex-grow-*
утиліти, щоб увімкнути здатність елемента Flex збільшуватися, щоб заповнити доступний простір. У наведеному нижче прикладі .flex-grow-1
елементи використовують весь доступний простір, але залишають необхідний простір двом іншим елементам.
Використовуйте .flex-shrink-*
утиліти, щоб увімкнути здатність гнучкого елемента зменшуватися, якщо необхідно. У наведеному нижче прикладі другий flex-елемент з .flex-shrink-1
примусово переносить свій вміст на новий рядок, «згортаючись», щоб залишити більше місця для попереднього flex-елемента з .w-100
.
Чуйні варіанти також існують для 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 .
Вертикально перемістіть один гнучкий елемент у верхню або нижню частину контейнера, змішуючи align-items
, flex-direction: column
та margin-top: auto
або margin-bottom: auto
.
Змініть спосіб упаковки гнучких елементів у гнучкий контейнер. Виберіть без перенесення (браузер за замовчуванням) за допомогою .flex-nowrap
, обтікання за допомогою .flex-wrap
або зворотне загортання за допомогою .flex-wrap-reverse
.
Чуйні варіанти також існують для 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 для будь-яких додаткових значень.
Чуйні варіанти також існують для 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
та збільшили кількість гнучких елементів.
Голови вгору! Ця властивість не впливає на окремі рядки гнучких елементів.
Чуйні варіанти також існують для 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