CSS Flexible Box Layout (Flexbox) — это одномерная модель компоновки, разработанная для эффективного распределения пространства между элементами контейнера, даже если их точный размер неизвестен или меняется динамически.

1. Концепция двух осей: фундамент Flexbox

Все поведение Flexbox подчиняется взаимодействию двух взаимно перпендикулярных осей:

• Главная ось (Main Axis) — направление, вдоль которого выстраиваются элементы (по умолчанию слева направо).
• Поперечная ось (Cross Axis) — направление, перпендикулярное главной оси (по умолчанию сверху вниз).

Ключевое правило двух осей:
Свойство justify-content ВСЕГДА управляет выравниванием вдоль главной оси (Main Axis).
Свойство align-items ВСЕГДА управляет выравниванием вдоль поперечной оси (Cross Axis).
Если вы меняете flex-direction: column, главная ось поворачивается вертикально, и justify-content начинает выравнивать по вертикали!

2. Свойства Flex-контейнера (Родителя)

Чтобы активировать Flexbox-контекст, достаточно задать контейнеру:

.container {  
  display: flex; /* или inline-flex для строчного поведения */  
}

2.1 Сводная таблица свойств контейнера

Совет эксперта:
Всегда используйте свойство gap (например, gap: 16px) для отступов между элементами вместо внешних отступов margin. Свойство gap поддерживается всеми современными браузерами и не создает паразитных отступов по внешним границам контейнера.

3. Вечная задача верстки: идеальное центрирование блока

Классическая задача центрирования элемента по горизонтали и вертикали решается во Flexbox ровно тремя строчками CSS:

.modal-wrapper {  
  display: flex;  
  justify-content: center; /* Центр по горизонтали */  
  align-items: center;     /* Центр по вертикали */  
  min-height: 100vh;       /* Высота во весь экран */  
}

4. Свойства дочерних элементов (Flex Items)

Дочерние элементы получают гибкость и могут управлять собственным размером и пропорциями:

4.1 Триада flex: grow, shrink, basis

.item {  
  /* flex: <flex-grow> <flex-shrink> <flex-basis>; */  
  flex: 1 1 0%;  
}

• flex-grow: <number> — коэффициент роста (жадности). Определяет, какую долю свободного пространства заберет элемент (0 — не растет).
• flex-shrink: <number> — коэффициент сжатия. Определяет, насколько элемент сжимается при дефиците места (0 — сжатие запрещено).
• flex-basis: <length> — базовый размер элемента до распределения оставшегося пространства.

Обратите внимание:
Сокращение flex: 1 эквивалентно flex: 1 1 0%. Оно указывает элементу занять всю доступную долю свободного пространства и при необходимости сжиматься. Это идеальный выбор для колонок одинаковой ширины.

4.2 Свойство align-self

Позволяет переопределить align-items родителя для одного конкретного элемента:

.special-card {  
  align-self: flex-end; /* Прижать только этот элемент к низу */  
}

5. Готовые практические рецепты

5.1 Прижатый подвал (Sticky Footer)

body {  
  display: flex;  
  flex-direction: column;  
  min-height: 100vh;  
}

main {  
  flex: 1; /* Растягивает контентную область на всю высоту */  
}

5.2 Навбар: Логотип слева, меню справа

.navbar {  
  display: flex;  
  align-items: center;  
  gap: 16px;  
}

.nav-links {  
  margin-left: auto; /* Магическое свойство: отодвигает ссылки к правому краю */  
}

6. Резюме: коротко о главном

• Главная ось управляется через justify-content, поперечная — через align-items.
• flex-direction: column переворачивает оси.
• gap исключает необходимость в сложных формулах margin.
• margin-left: auto во Flex-контейнере элегантно прижимает блок к правому краю.

Формула успеха Flexbox:
Контейнер: display: flex + gap → Направление: flex-direction → Выравнивание: justify-content & align-items.