Bootstrap 5 Flex Включить поведение Flex

Bootstrap 5 Enable Flex Behaviors используются для применения утилит отображения для создания контейнера flexbox и преобразования прямых дочерних элементов в flex-элементы. Благодаря большему количеству гибких свойств гибкие элементы и контейнеры могут быть дополнительно изменены.

Полезные классы:

• .d-flex: отображает элемент как гибкий контейнер.
• . d-inline-flex: отображает элемент как гибкий контейнер встроенного уровня.

Для адаптивных вариантов мы также можем использовать следующие классы:

• .d-sm-flex: отображает элемент как гибкий контейнер, когда размер экрана изменяется на sm.
• . d-sm-inline-flex: отображает элемент как встроенный гибкий контейнер, когда размер экрана изменяется на sm .
• . d-md-flex: отображает элемент как гибкий контейнер, когда размер экрана изменяется на md .
• .d-md-inline-flex: отображает элемент как встроенный гибкий контейнер, когда размер экрана изменяется на md.
• . d-lg-flex: отображает элемент как гибкий контейнер, когда размер экрана изменяется на lg.
• .d-lg-inline-flex : отображает элемент как встроенный гибкий контейнер, когда размер экрана изменяется на lg .
• . d-xl-flex : отображает элемент как гибкий контейнер, когда размер экрана изменяется на xl.
• .d-xl-inline-flex: отображает элемент как встроенный гибкий контейнер, когда размер экрана изменяется на xl.
• .d-xxl-flex: отображает элемент как гибкий контейнер, когда размер экрана изменяется на xxl.
• .d-xxl-inline-flex: отображает элемент как встроенный гибкий контейнер, когда размер экрана изменяется на xxl.

Примечание. .d-inline-flex не заставляет гибкие элементы отображаться встроенными, а заставляет отображать гибкие контейнеры встроенными.

Синтаксис:

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

Пример 1: В этом примере мы реализуем . свойство d-flex .

Выход:

Пример. В этом примере мы реализуем свойство .d-inline-flex .

Выход:

Ссылки: https://getbootstrap.com/docs/5.0/utilities/flex/#enable-flex-behaviors