Flexbox CSS: полное руководство по гибкой вёрстке с примерами

Что такое Flexbox и зачем он нужен

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

Основа Flexbox — это контейнер и его дочерние элементы. Контейнеру задаётся display: flex, после чего все прямые потомки становятся flex-элементами. Они автоматически выстраиваются в строку или колонку, а их размеры и положение управляются через свойства Flexbox.

Свойства flex-контейнера

Контейнер управляет расположением своих элементов. Основные свойства:

• — направление оси (row, column, row-reverse, column-reverse).
• — выравнивание по главной оси (flex-start, center, space-between, space-around).
• — выравнивание по поперечной оси (stretch, center, flex-start, flex-end).
• — перенос элементов на новую строку (nowrap, wrap, wrap-reverse).

Например, чтобы центрировать элементы по вертикали и горизонтали, достаточно задать контейнеру:

.container { display: flex; justify-content: center; align-items: center;
}

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

Отдельные элементы тоже можно гибко настраивать:

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

Часто используют сокращённое свойство flex, которое объединяет grow, shrink и basis. Например, flex: 1 0 200px означает, что элемент будет растягиваться, но не сжиматься, с базовым размером 200px.

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

До Flexbox для создания адаптивного меню часто использовали float или inline-block. Код получался громоздким и ненадёжным. С Flexbox всё проще:

.menu { display: flex; justify-content: space-between; align-items: center;
}
.menu-item { flex: 1; text-align: center;
}

Элементы меню автоматически займут равное пространство и выровняются по центру. При изменении размера экрана они адаптивно руются.

Сравнение Flexbox и CSS Grid

Flexbox и Grid не конкурируют, а дополняют друг друга. Flexbox лучше для мелких компонентов вроде навигации или карточек, а Grid — для общего макета страницы.

Типичные ошибки и ограничения

Новички часто злоупотребляют Flexbox там, где хватит простых средств. Не стоит использовать Flexbox для всего подряд — иногда block или inline-block эффективнее.

Распространённые ошибки:

• Забывают задать flex-basis, из-за чего элементы ведут себя непредсказуемо.
• Используют margin: auto вместо justify-content или align-items.
• Не учитывают, что flex-shrink по умолчанию равен 1 — элементы сжимаются, если не задано иное.

Flexbox не подходит для сложных табличных данных или точного пиксельного позиционирования. Также в очень старых браузерах требуется fallback.

Чек-лист применения Flexbox

• Определите, нужно ли одномерное выравнивание.
• Задайте контейнеру display: flex.
• Настройте направление и перенос с помощью flex-direction и flex-wrap.
• Выровняйте элементы по осям через justify-content и align-items.
• При необходимости йте отдельные элементы через flex-grow, flex-shrink, align-self.
• Проверьте в разных браузерах.