Display, flex и выравнивание

Display

D-группа переключает режим отображения

d-none, d-block, d-inline, d-inline-block, d-flex, d-inline-flex, d-grid, d-inline-grid.

Flex basis

Flex-группа задаёт способ занятия доступного места

• .flex-1flex: 1 1 0 — равномерное распределение свободного места.
• .flex-autoflex: 1 1 auto — учитывает исходный размер содержимого.
• .flex-noneflex: 0 0 auto — запрещает рост и сжатие.
• .flex-0…25Гибкий basis по spacing-шкале.
• .flex-fixed-0…25Фиксированный basis по spacing-шкале.

Alignment

Выравнивание разделено по назначению

• Текст.text-left, .text-center, .text-right, .text-justify.
• Главная ось.justify-start, .justify-center, .justify-end, .justify-between, .justify-around, .justify-evenly.
• Поперечная ось.items-start, .items-center, .items-end, .items-stretch.
• Один элемент.self-start, .self-center, .self-end, .self-stretch.

<div class="d-flex items-center justify-between gap-3">
  <strong>Заголовок</strong>
  <div class="d-flex items-center gap-2">...</div>
</div>

Responsive

Display и flex-basis можно менять на breakpoint

d-block d-md-flex, d-md-none, flex-fixed-lg-12. Alignment-классы не имеют responsive-вариантов.