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>