Что такое Flexbox и как центрировать содержимое с его помощью?

Question

Accepted Answer

**Flexbox** — это одномерная система макета, которая расставляет элементы в одной **строке** или **колонне** и распределяет пространство вдоль этой оси. Это современное решение для проблем выравнивания и отступов, которые раньше требовали использования float и хаков.

```css
.container {
  display: flex;              /* turn on flex; children become flex items */
  flex-direction: row;       /* main axis: row (default) or column */
  gap: 1rem;                 /* space BETWEEN items (no margin hacks) */
}
```

## Две оси

Flexbox имеет **главную ось** (направление потока элементов) и **поперечную ось** (перпендикулярная). Свойства отображаются на них:

```css
.container {
  justify-content: center; /* aligns along the MAIN axis */
  align-items: center;     /* aligns along the CROSS axis */
}
```

## Идеальное центрирование — классический случай использования

```css
.center {
  display: flex;
  justify-content: center; /* horizontal (main axis = row) */
  align-items: center;     /* vertical (cross axis) */
  min-height: 100vh;
}
```

Эти три строки центрируют дочерний элемент как горизонтально, так и вертикально — задача, которая была чрезвычайно сложной до появления Flexbox.

## Распространённые паттерны

```css
/* push items apart: logo left, menu right */
.navbar { display: flex; justify-content: space-between; align-items: center; }

/* wrap to new lines when items don't fit */
.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
```

Варианты `justify-content` включают `flex-start`, `center`, `flex-end`, `space-between`, `space-around`, `space-evenly`.

## Почему это важно

Flexbox — это повседневный инструмент для навигационных панелей, групп кнопок, рядов карточек, центрирования и любого макета типа «строка элементов».

Понимание модели главной/поперечной оси (и того, что `justify-content`/`align-items` меняют значение при изменении `flex-direction`) — это ключевая ментальная модель.

Используйте Flexbox для одномерных макетов и Grid для двумерных.