Flexbox — выравнивание

Flexbox имеет две оси: main axis (главная, по flex-direction) и cross axis (поперечная). justify-content — выравнивание по main axis. align-items — по cross axis. flex-grow/shrink/basis — управление размером элементов. align-self — индивидуальное выравнивание одного элемента.

Две оси Flexbox:

Main axis — по flex-direction:

• row: горизонтально (слева направо)
• column: вертикально (сверху вниз)

Cross axis — поперечная:

• row: вертикально
• column: горизонтально

justify-content (main axis):

• flex-start — к началу
• flex-end — к концу
• center — по центру
• space-between — равные пространства (без отступов по краям)
• space-around — равные пространства (с половинными отступами по краям)
• space-evenly — равные пространства (одинаковые отступы везде)

align-items (cross axis):

• stretch — растянуть (по умолчанию)
• flex-start — к началу
• flex-end — к концу
• center — по центру
• baseline — по базовой линии текста

align-self:

• Как align-items, но для ОДНОГО элемента

align-content:

• Выравнивание строк (when flex-wrap: wrap)

Flex-свойства (items):

• flex-grow: сколько «расти» при наличии свободного места
• flex-shrink: сколько «сжиматься» при нехватке места
• flex-basis: начальный размер (до grow/shrink)
• flex: grow shrink basis (сокращение)
• flex: 1 = flex: 1 1 0%
• flex: auto = flex: 1 1 auto

Две оси — как координатная сетка. justify-content — «расставлять кнопки по горизонтали». align-items — «расставлять кнопки по вертикали». flex-grow — «кто сколько занимает свободного места».

**Самый простой:**

/* Центрирование */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* Равномерное распределение */
.nav {
  display: flex;
  justify-content: space-between;
}

Базовое центрирование и space-between для навигации.

**Простой:**

/* Карточки с flex-grow */
.grid {
  display: flex;
  gap: 1rem;
}

.card-small { flex: 1; }
.card-large { flex: 2; } /* Занимает в 2 раза больше */

/* Нижний футер */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content { flex: 1; } /* Занимает всё свободное место */

.footer {
  /* Автоматически прижат к низу */
}

/* Индивидуальное выравнивание */
.item-center { align-self: center; }
.item-end { align-self: flex-end; }

flex-grow для пропорций, flex: 1 для footer, align-self.

**Реальный пример:**

/* Полноценный flex-layout */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
}

.nav {
  display: flex;
  gap: 1.5rem;
}

.content {
  flex: 1;
  display: flex;
  gap: 2rem;
  padding: 2rem;
}

.sidebar {
  flex: 0 0 250px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
}

.sidebar-item.active {
  background: #e3f2fd;
  align-self: stretch;
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

Полный flex-layout с выравниванием на всех уровнях.

**Неправильно:** Путать justify-content и align-items

**Почему:** justify-content — main axis (по flex-direction). align-items — cross axis (поперёк).

**Правильно:** justify-content — ВДОЛЬ оси. align-items — ПОПЕРЁК оси.

**Неправильно:** Не использовать flex: 1 для «растяжки»

**Почему:** flex: 1 = flex: 1 1 0%. Элемент растягивается на доступное пространство.

**Правильно:** flex: 1 — «займи всё свободное место». Отлично для основного контента.

**Неправильно:** Забывать min-height для column-центрирования

**Почему:** В column-контейнере align-items: center работает по горизонтали. Для вертикального центрирования нужна min-height.

**Правильно:** Для центрирования по обеим осям: min-height: 100vh + justify-content: center + align-items: center.

• justify-content — main axis, align-items — cross axis
• flex: 1 = flex: 1 1 0% (растягивается на доступное место)
• align-self — индивидуальное выравнивание элемента
• Для вертикального центрирования: min-height + align-items: center
• space-between — равные пространства без отступов по краям

Назад: Вы знаете основы flexbox (C13) — выравнивание управляет положением элементов внутри flex-контейнера.

Вперёд: В следующем уроке (C15) вы изучите основы CSS Grid: display: grid и grid-template-columns.