Bootstrap Flexbox

Bootstrap 5 Flexbox Управление Полная Таблица
Tags:
Categories:

Bootstrap 5 Flexbox Управление: Полная Таблица

Таблица с основными классами Bootstrap 5 для работы с Flexbox:

1. Основные Flex-контейнеры

КлассОписаниеПример
.d-flexВключает Flexbox<div class="d-flex">
.d-inline-flexСтрочный Flex-контейнер<span class="d-inline-flex">
.d-sm-flexАдаптивный Flex (на экранах ≥576px)<div class="d-sm-flex">

2. Направление осей (Flex Direction)

КлассОписаниеCSS-аналог
.flex-rowГоризонтальное (слева направо)flex-direction: row
.flex-row-reverseГоризонтальное (справа налево)flex-direction: row-reverse
.flex-columnВертикальное (сверху вниз)flex-direction: column
.flex-column-reverseВертикальное (снизу вверх)flex-direction: column-reverse

Пример:

<div class="d-flex flex-row">  <!-- По умолчанию -->
  <div>1</div><div>2</div>
</div>

3. Выравнивание по главной оси (Justify Content)

КлассОписаниеCSS-аналог
.justify-content-startВ начале осиjustify-content: flex-start
.justify-content-endВ конце осиjustify-content: flex-end
.justify-content-centerПо центруjustify-content: center
.justify-content-betweenРавные промежутки междуjustify-content: space-between
.justify-content-aroundРавные отступы вокругjustify-content: space-around
.justify-content-evenlyПолное равномерное распределениеjustify-content: space-evenly

Пример:

<div class="d-flex justify-content-between">
  <div>Лево</div><div>Право</div>
</div>

4. Выравнивание по поперечной оси (Align Items)

КлассОписаниеCSS-аналог
.align-items-startВ начале осиalign-items: flex-start
.align-items-endВ конце осиalign-items: flex-end
.align-items-centerПо центруalign-items: center
.align-items-baselineПо базовой линииalign-items: baseline
.align-items-stretchРастянуть (по умолчанию)align-items: stretch

Пример:

<div class="d-flex align-items-center" style="height: 100px;">
  <div>По центру высоты</div>
</div>

5. Управление отдельными элементами (Align Self)

КлассОписаниеCSS-аналог
.align-self-startЭлемент в началеalign-self: flex-start
.align-self-endЭлемент в концеalign-self: flex-end
.align-self-centerЭлемент по центруalign-self: center
.align-self-stretchРастянуть элементalign-self: stretch

Пример:

<div class="d-flex">
  <div class="align-self-end">Прижат к низу</div>
</div>

6. Перенос элементов (Flex Wrap)

КлассОписаниеCSS-аналог
.flex-nowrapБез переноса (по умолчанию)flex-wrap: nowrap
.flex-wrapС переносомflex-wrap: wrap
.flex-wrap-reverseПеренос в обратном порядкеflex-wrap: wrap-reverse

Пример:

<div class="d-flex flex-wrap">
  <div class="w-25">1</div><div class="w-25">2</div>...
</div>

7. Управление порядком (Order)

КлассОписание
.order-0 – .order-5Приоритет от 0 (высокий) до 5 (низкий)
.order-firstПервым (аналог order: -1)
.order-lastПоследним (аналог order: 6)

Пример:

<div class="d-flex">
  <div class="order-2">Второй</div>
  <div class="order-1">Первый</div>
</div>

8. Автоматические отступы (Flex Fill)

КлассОписание
.flex-fillЭлемент растягивается, заполняя пространство
.flex-grow-1Аналог flex-grow: 1

Пример:

<div class="d-flex">
  <div class="flex-fill">Занимает всё место</div>
</div>

9. Адаптивные классы

Все классы работают с breakpoints:

  • .flex-sm-row, .justify-content-md-center, .align-items-lg-end и т.д.

Пример:

<div class="d-flex flex-column flex-md-row">
  <!-- На мобильных — вертикально, на десктопе — горизонтально -->
</div>

Итог

Bootstrap 5 предоставляет полный контроль над Flexbox через простые классы. Для сложных макетов комбинируйте их с Grid.

Совет: Используйте .gap-* для отступов между элементами:

<div class="d-flex gap-3">
  <div>Элемент 1</div>
  <div>Элемент 2</div>
</div>