День 9 | Flexbox подробно

Что такое Flexbox?

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

Зачем нужен Flexbox?

• Выравнивание элементов по горизонтали и вертикали
• Распределение пространства между элементами
• Создание адаптивных макетов
• Упрощение создания навигации, карточек, форм

Основы Flexbox

Чтобы использовать Flexbox, нужно установить display: flex на родительском элементе (контейнере). Этот элемент становится flex-контейнером, а его прямые потомки — flex-элементами.

Что произошло? Элементы расположились в ряд (по умолчанию) и выровнялись по высоте.

Направление элементов (flex-direction)

Свойство flex-direction определяет, в каком направлении располагаются элементы:

• row — в ряд (слева направо) — по умолчанию
• row-reverse — в ряд (справа налево)
• column — в колонку (сверху вниз)
• column-reverse — в колонку (снизу вверх)

Выравнивание по главной оси (justify-content)

justify-content выравнивает элементы по главной оси (горизонтально, если flex-direction: row):

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

Выравнивание по поперечной оси (align-items)

align-items выравнивает элементы по поперечной оси (вертикально, если flex-direction: row):

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

Перенос элементов (flex-wrap)

По умолчанию все элементы пытаются поместиться в одну строку. flex-wrap позволяет переносить элементы на новую строку:

• nowrap — не переносить (по умолчанию)
• wrap — переносить на новую строку
• wrap-reverse — переносить в обратном порядке

Отступы между элементами (gap)

gap — современное свойство для отступов между элементами. Работает и по горизонтали, и по вертикали:

.container {
  display: flex;
  gap: 20px; /* Отступ между всеми элементами */
}

/* Или отдельно */
gap: 10px 20px; /* Вертикальный, горизонтальный */

Преимущество gap: Не нужно использовать margin на элементах, что упрощает код и избегает проблем с первым/последним элементом.

Свойства flex-элементов

На самих flex-элементах можно задавать свойства:

flex-grow

Определяет, насколько элемент может расти, чтобы заполнить доступное пространство:

.item {
  flex-grow: 1; /* Займёт всё доступное пространство */
}

.item-large {
  flex-grow: 2; /* Займёт в 2 раза больше пространства */
}

flex-shrink

Определяет, насколько элемент может сжиматься:

.item {
  flex-shrink: 1; /* Может сжиматься */
}

.item-fixed {
  flex-shrink: 0; /* Не сжимается */
}

flex-basis

Базовый размер элемента до распределения пространства:

.item {
  flex-basis: 200px; /* Базовый размер 200px */
}

Короткая запись (flex)

/* flex: grow shrink basis */
.item {
  flex: 1 1 auto; /* grow: 1, shrink: 1, basis: auto */
}

.item-fixed {
  flex: 0 0 200px; /* Не растёт, не сжимается, базовый размер 200px */
}

Практические примеры

Пример 1: Навигация

Пример 2: Карточки в ряд

Практическое задание

1. Создайте навигацию с Flexbox (логотип слева, меню по центру, кнопка справа)
2. Создайте ряд карточек с равной шириной
3. Создайте форму с полями, выровненными по центру
4. Поэкспериментируйте с justify-content и align-items
5. Попробуйте flex-wrap для адаптивности

Что дальше?

Отлично! Теперь вы знаете Flexbox. В следующем уроке мы изучим позиционирование элементов — это поможет создавать более сложные макеты.