Быстрое управление макетом, выравниванием и размером столбцов сетки, навигацией, компонентами и многим другим с помощью полного набора адаптивных утилит flexbox. Для более сложных реализаций может потребоваться пользовательский CSS.
Задействуйте «гибкое» поведение
Применяйте утилиты display для создания гибкого контейнера и трансформируйте прямые дочерние элементы в «гибкие». Гибкие контейнеры и элементы можно изменять дополнительными свойствами гибкости.
<divclass="d-flex p-2 bd-highlight">Я контейнер flexbox!</div><divclass="d-inline-flex p-2 bd-highlight">Я встроенный контейнер Flexbox!</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.d-xxl-flex.d-xxl-inline-flex
Направление
Задайте направление гибких элементов в гибком контейнере утилитами направления. В большинстве случаев вы можете пропустить «горизонтальный класс» в данном случае, т.к. умолчание браузера – row. Однако вы можете попасть в ситуацию, где вам понадобится явно задать это значение (например, при разработке отзывчивой верстки).
Используйте элемент класса .flex-row для задания горизонтального направления (умолчание браузера), или .flex-row-reverse для того, чтобы горизонтальное направление начиналось с противоположной стороны.
<divclass="d-flex flex-row bd-highlight mb-3"><divclass="p-2 bd-highlight">Flex item 1</div><divclass="p-2 bd-highlight">Flex item 2</div><divclass="p-2 bd-highlight">Flex item 3</div></div><divclass="d-flex flex-row-reverse bd-highlight"><divclass="p-2 bd-highlight">Flex item 1</div><divclass="p-2 bd-highlight">Flex item 2</div><divclass="p-2 bd-highlight">Flex item 3</div></div>Используйте класс .flex-column для создания вертикального направления, или .flex-column-reverse, чтобы вертикальное направление начиналось с противоположной стороны.
<divclass="d-flex flex-column bd-highlight mb-3"><divclass="p-2 bd-highlight">Flex item 1</div><divclass="p-2 bd-highlight">Flex item 2</div><divclass="p-2 bd-highlight">Flex item 3</div></div><divclass="d-flex flex-column-reverse bd-highlight"><divclass="p-2 bd-highlight">Flex item 1</div><divclass="p-2 bd-highlight">Flex item 2</div><divclass="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.flex-xxl-row.flex-xxl-row-reverse.flex-xxl-column.flex-xxl-column-reverse
Выравнивание содержимого
Пользуйтесь утилитами justify-content или контейнерами флексбокса для изменения выравнивания гибких элементов по главной оси (ось х по умолчанию, ось у – если flex-direction: column). Выбирайте из start (умолчание браузера), end, center, between, around или evenly.
<divclass="d-flex justify-content-start">...</div><divclass="d-flex justify-content-end">...</div><divclass="d-flex justify-content-center">...</div><divclass="d-flex justify-content-between">...</div><divclass="d-flex justify-content-around">...</div><divclass="d-flex justify-content-evenly">...</div>Responsive variations also exist for justify-content.
.justify-content-start.justify-content-end.justify-content-center.justify-content-between.justify-content-around.justify-content-evenly.justify-content-sm-start.justify-content-sm-end.justify-content-sm-center.justify-content-sm-between.justify-content-sm-around.justify-content-sm-evenly.justify-content-md-start.justify-content-md-end.justify-content-md-center.justify-content-md-between.justify-content-md-around.justify-content-md-evenly.justify-content-lg-start.justify-content-lg-end.justify-content-lg-center.justify-content-lg-between.justify-content-lg-around.justify-content-lg-evenly.justify-content-xl-start.justify-content-xl-end.justify-content-xl-center.justify-content-xl-between.justify-content-xl-around.justify-content-xl-evenly.justify-content-xxl-start.justify-content-xxl-end.justify-content-xxl-center.justify-content-xxl-between.justify-content-xxl-around.justify-content-xxl-evenly
Выравнивание элементов
Используйте утилиты align-items в контейнерах флексбокса для изменения выравнивания гибких элементов по перекрестной оси (ось Y по умолч., ось X – если flex-direction: column). Выбирайте из start, end, center, baseline или stretch (по умолчанию в браузере).
<divclass="d-flex align-items-start">...</div><divclass="d-flex align-items-end">...</div><divclass="d-flex align-items-center">...</div><divclass="d-flex align-items-baseline">...</div><divclass="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-items-xxl-start.align-items-xxl-end.align-items-xxl-center.align-items-xxl-baseline.align-items-xxl-stretch
Сплошное выравнивание
Используйте утилиты align-self в гибких элементах для индивидуального изменения их выравнивания по перекрестной оси (ось у по умолч., ось х – если flex-direction: column). Выбирайте из таких же параметров, как у align-items: start, end, center, baseline или stretch (умолчание браузера).
<divclass="align-self-start">Aligned flex item</div><divclass="align-self-end">Aligned flex item</div><divclass="align-self-center">Aligned flex item</div><divclass="align-self-baseline">Aligned flex item</div><divclass="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.align-self-xxl-start.align-self-xxl-end.align-self-xxl-center.align-self-xxl-baseline.align-self-xxl-stretch
Заполнение
Используйте класс .flex-fill в серии вложенных элементов для придания им равной ширины, равной их содержимому (или равную ширину, если их содержимое не превосходит их границы), занимая все доступное горизонтальное пространство.
<divclass="d-flex bd-highlight"><divclass="p-2 flex-fill bd-highlight">Flex item with a lot of content</div><divclass="p-2 flex-fill bd-highlight">Flex item</div><divclass="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-xxl-fill
Увеличение и уменьшение
Используйте классы .flex-grow-* для переключения возможности элемента «расти» и заполнять свободное место. В примере ниже, элементы класса .flex-grow-1 используют все доступное место, которое может, но притом остающимся двум гибким элементам остается необходимое им место.
<divclass="d-flex bd-highlight"><divclass="p-2 flex-grow-1 bd-highlight">Flex item</div><divclass="p-2 bd-highlight">Flex item</div><divclass="p-2 bd-highlight">Third flex item</div></div>Используйте классы .flex-shrink-* для переключения возможности гибких элементов уменьшаться, если необходимо. В примере ниже второй гибкий элемент класса .flex-shrink-1 «принуждается» оборачивать свое содержимое новой строкой, «уменьшаясь» и оставляя больше места для предыдущего гибкого элемента класса .w-100.
<divclass="d-flex bd-highlight"><divclass="p-2 w-100 bd-highlight">Flex item</div><divclass="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.flex-xxl-{grow|shrink}-0.flex-xxl-{grow|shrink}-1
Авто-марджины
Flexbox может делать довольно удивительные вещи, когда Вы смешиваете выравнивание гибкости с автоматическими полями. Ниже показаны три примера управления гибкими элементами через автоматические поля: по умолчанию (без автоматического поля), перемещение двух элементов вправо (.me-auto) и перемещение двух элементов влево (.ms-auto) .
<divclass="d-flex bd-highlight mb-3"><divclass="p-2 bd-highlight">Flex item</div><divclass="p-2 bd-highlight">Flex item</div><divclass="p-2 bd-highlight">Flex item</div></div><divclass="d-flex bd-highlight mb-3"><divclass="me-auto p-2 bd-highlight">Flex item</div><divclass="p-2 bd-highlight">Flex item</div><divclass="p-2 bd-highlight">Flex item</div></div><divclass="d-flex bd-highlight mb-3"><divclass="p-2 bd-highlight">Flex item</div><divclass="p-2 bd-highlight">Flex item</div><divclass="ms-auto p-2 bd-highlight">Flex item</div></div>С элементами выравнивания
Передвигайте по вертикали один из гибких элементов к верху или низу контейнера, сочетая align-items, flex-direction: column и margin-top: auto или margin-bottom: auto.
<divclass="d-flex align-items-start flex-column bd-highlight mb-3"style="height: 200px;"><divclass="mb-auto p-2 bd-highlight">Flex item</div><divclass="p-2 bd-highlight">Flex item</div><divclass="p-2 bd-highlight">Flex item</div></div><divclass="d-flex align-items-end flex-column bd-highlight mb-3"style="height: 200px;"><divclass="p-2 bd-highlight">Flex item</div><divclass="p-2 bd-highlight">Flex item</div><divclass="mt-auto p-2 bd-highlight">Flex item</div></div>Обертка
Изменяйте способ оборачивания гибких элементов в гибком контейнере. Можете совсем не оборачивать их (умолчание браузера) с классом .flex-nowrap, можете обернуть их классом .flex-wrap или реверсируйте оборачивание с классом .flex-wrap-reverse.
<divclass="d-flex flex-nowrap"> ...
</div><divclass="d-flex flex-wrap"> ...
</div><divclass="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-xxl-nowrap.flex-xxl-wrap.flex-xxl-wrap-reverse
Порядок
Измените визуальный порядок определенных гибких элементов с помощью утилит order. Мы создали параметры лишь для придания элементу первого или последнего порядкового положения, как и для сброса данной настройки для использования порядка DOM. Поскольку order принимает любое целочисленное значение от 0 до 5, добавьте обычный CSS для создания необходимых дополнительных значений.
<divclass="d-flex flex-nowrap bd-highlight"><divclass="order-3 p-2 bd-highlight">First flex item</div><divclass="order-2 p-2 bd-highlight">Second flex item</div><divclass="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-sm-0.order-sm-1.order-sm-2.order-sm-3.order-sm-4.order-sm-5.order-md-0.order-md-1.order-md-2.order-md-3.order-md-4.order-md-5.order-lg-0.order-lg-1.order-lg-2.order-lg-3.order-lg-4.order-lg-5.order-xl-0.order-xl-1.order-xl-2.order-xl-3.order-xl-4.order-xl-5.order-xxl-0.order-xxl-1.order-xxl-2.order-xxl-3.order-xxl-4.order-xxl-5
Кроме того, существуют также адаптивные классы .order-first и .order-last, которые изменяют order, применяя значения order: -1 и order: 6 соответственно.
.order-first.order-last.order-sm-first.order-sm-last.order-md-first.order-md-last.order-lg-first.order-lg-last.order-xl-first.order-xl-last.order-xxl-first.order-xxl-last
Выравнивание содержимого
Используйте утилиты align-content в контейнерах флексбокса, чтобы гибкие элементы выравнивались «вместе» по одной перекрестной оси. Выбирайте из start (умолчание браузера), end, center, between, around или stretch. Чтобы продемонстрировать эти утилиты, мы применили flex-wrap: wrap и увеличили количество элементов flex.
Внимание! Это свойство не действует на одиночных рядах или одиночных гибких элементах.
<divclass="d-flex align-content-start flex-wrap"> ...
</div><divclass="d-flex align-content-end flex-wrap">...</div><divclass="d-flex align-content-center flex-wrap">...</div><divclass="d-flex align-content-between flex-wrap">...</div><divclass="d-flex align-content-around flex-wrap">...</div><divclass="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.align-content-xxl-start.align-content-xxl-end.align-content-xxl-center.align-content-xxl-around.align-content-xxl-stretch
Медиа объект
Хотите скопировать компонент мультимедийного объекта из Bootstrap 4? В мгновение ока воссоздайте его с помощью нескольких гибких утилит, которые обеспечивают еще большую гибкость и настройку, чем раньше.
<divclass="d-flex"><divclass="flex-shrink-0"><imgsrc="..."alt="..."></div><divclass="flex-grow-1 ms-3"> Это какой-то контент из медиа-компонента. Вы можете заменить его любым содержимым и при необходимости отрегулировать его. </div></div>And say you want to vertically center the content next to the image:
<divclass="d-flex align-items-center"><divclass="flex-shrink-0"><imgsrc="..."alt="..."></div><divclass="flex-grow-1 ms-3"> Это какой-то контент из медиа-компонента. Вы можете заменить его любым содержимым и при необходимости отрегулировать его. </div></div>Sass
API утилит
Утилиты флексбокс объявлены в нашем API утилит в scss/_utilities.scss. Узнайте, как использовать API утилит.
"flex":(responsive:true,property:flex,values:(fill:11auto)),"flex-direction":(responsive:true,property:flex-direction,class:flex,values:rowcolumnrow-reversecolumn-reverse),"flex-grow":(responsive:true,property:flex-grow,class:flex,values:(grow-0:0,grow-1:1,)),"flex-shrink":(responsive:true,property:flex-shrink,class:flex,values:(shrink-0:0,shrink-1:1,)),"flex-wrap":(responsive:true,property:flex-wrap,class:flex,values:wrapnowrapwrap-reverse),"gap":(responsive:true,property:gap,class:gap,values:$spacers),"justify-content":(responsive:true,property:justify-content,values:(start:flex-start,end:flex-end,center:center,between:space-between,around:space-around,evenly:space-evenly,)),"align-items":(responsive:true,property:align-items,values:(start:flex-start,end:flex-end,center:center,baseline:baseline,stretch:stretch,)),"align-content":(responsive:true,property:align-content,values:(start:flex-start,end:flex-end,center:center,between:space-between,around:space-around,stretch:stretch,)),"align-self":(responsive:true,property:align-self,values:(auto:auto,start:flex-start,end:flex-end,center:center,baseline:baseline,stretch:stretch,)),"order":(responsive:true,property:order,values:(first:-1,0:0,1:1,2:2,3:3,4:4,5:5,last:6,),),