Верстка сайтов — это как сборка мебели из IKEA: вроде все детали есть, но без понятной инструкции можно нагородить такого, что потом не разберешь. Раньше, чтобы расположить блоки в ряд или по центру, приходилось изощряться с float, таблицами и костылями. Но теперь есть Flexbox — инструмент, который делает раскладку элементов простой и логичной. Если вы когда-нибудь мучились с вертикальным выравниванием или «плывущими» колонками — эта статья для вас. Погнали разбираться, как приручить гибкость.

Digital-студия WNDER

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

Flexbox (или флексбокс) — это модуль CSS, который позволяет управлять расположением элементов внутри контейнера. Представьте, что у вас есть коробка, а внутри — несколько предметов. Обычно они лежат как попало: кто-то сверху, кто-то снизу. Flexbox дает вам возможность выстроить их в ряд, в колонку, равномерно распределить или прижать к краям — и все это без танцев с бубном.

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

Главная идея флексбокса — гибкость. Элементы могут растягиваться, сжиматься, переноситься на новую строку — и все это контролируется парой свойств. Вы просто говорите контейнеру: «будь флексом», а дальше настраиваете поведение детей.

Основные понятия: контейнер и элементы

Чтобы начать работать с флексбоксом, нужно понять два ключевых термина:

  • Флекс-контейнер — родительский элемент, который получает свойство display: flex. Он становится «коробкой», внутри которой мы раскладываем детей.
  • Флекс-элементы — дочерние элементы контейнера. Именно их расположение мы и контролируем.

Вот как это выглядит на практике. Допустим, у нас есть HTML-структура:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

Чтобы сделать контейнер флексом, пишем в CSS:

.container {
  display: flex;
}

И всё! Теперь элементы 1, 2 и 3 выстроятся в ряд по горизонтали. По умолчанию они будут идти слева направо, но это можно изменить.

Лайфхак: Если добавить flex-wrap: wrap контейнеру, элементы начнут переноситься на новую строку, когда не хватает места. Это основа адаптивности без медиазапросов.

Управление направлением и порядком элементов

Одна из самых мощных возможностей флексбокса — управление направлением осей. По умолчанию элементы располагаются по главной оси (обычно горизонтальной). Но вы можете изменить направление с помощью свойства flex-direction.

Значение Описание
row Элементы идут слева направо (по умолчанию)
row-reverse Элементы идут справа налево
column Элементы идут сверху вниз (вертикальная колонка)
column-reverse Элементы идут снизу вверх

Например, чтобы сделать вертикальное меню, достаточно задать flex-direction: column. Или, если нужно изменить порядок отображения без изменения HTML, используйте свойство order у элементов. По умолчанию все имеют order: 0. Чем меньше значение, тем раньше элемент появится.

.item:first-child {
  order: 2; /* теперь этот элемент будет вторым */
}
.item:last-child {
  order: 1; /* а этот — первым */
}

Выравнивание: главная и поперечная оси

В флексбоксе есть две оси: главная (направление размещения) и поперечная (перпендикулярная ей). Для каждой оси — свои свойства выравнивания.

Для главной оси используем justify-content. Оно управляет тем, как элементы распределяются вдоль строки:

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

Для поперечной оси — align-items. Оно выравнивает элементы по вертикали (если главная ось горизонтальна):

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

Классическая задача — отцентрировать элемент по вертикали и горизонтали. Раньше это было больно, а теперь — три строки:

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
Правило: Если хотите, чтобы элемент занимал всё свободное место, используйте flex-grow: 1. Если нужно, чтобы он не сжимался при нехватке места — flex-shrink: 0.

Гибкость размеров: flex-grow, flex-shrink, flex-basis

Теперь самое интересное — как элементы ведут себя, когда место в контейнере ограничено. За это отвечают три свойства:

  • flex-grow — коэффициент роста. Если у всех элементов flex-grow: 1, они поделят пространство поровну. Если у одного 2, а у другого 1, первый получит в два раза больше.
  • flex-shrink — коэффициент сжатия. Когда места не хватает, элементы могут сжиматься. По умолчанию 1.
  • flex-basis — базовый размер элемента до распределения пространства. Можно задать в пикселях, процентах и т.д.

Обычно используют сокращенную запись flex. Например, flex: 1 означает flex-grow: 1; flex-shrink: 1; flex-basis: 0% — элемент будет занимать равную долю пространства.

Код Что означает
flex: 1 Элемент растет и сжимается, базовая ширина 0
flex: auto Эквивалент flex: 1 1 auto — базовая ширина зависит от содержимого
flex: none Эквивалент flex: 0 0 auto — фиксированный размер

Пример: сделаем три колонки одинаковой ширины, которые будут занимать всю доступную область:

.item {
  flex: 1;
}

Или сделаем «шапку» сайта с логотипом слева, меню по центру и кнопкой справа, при этом меню будет занимать всё свободное место:

.header {
  display: flex;
  align-items: center;
}
.nav {
  flex: 1;
  text-align: center;
}

Практические советы и типичные ошибки

Flexbox мощный, но с ним легко наступить на грабли. Вот несколько советов:

  • Не забывайте про min-width и min-height. Иногда элементы не сжимаются так, как вы ожидаете, из-за минимального размера содержимого.
  • Свойство align-self позволяет переопределить выравнивание для конкретного элемента. Это удобно, когда один элемент нужно прижать к низу, а остальные — к верху.
  • Для сложных сеток, где нужно контролировать и ряды, и колонки, лучше использовать CSS Grid. Flexbox — для одномерной раскладки (один ряд или одна колонка).
Частая ошибка: Забывают, что justify-content работает по главной оси, а align-items — по поперечной. Если вы поменяли flex-direction на column, оси меняются местами, и свойства «переезжают».

Итоги

Flexbox — это не магия, но очень близко к ней. Он избавляет от тонн CSS-кода и нервов. Главное — запомнить базовые принципы:

  • Контейнер с display: flex управляет детьми.
  • Направление задается через flex-direction.
  • Выравнивание — через justify-content и align-items.
  • Гибкость размеров — через flex-grow, flex-shrink и flex-basis.

Попробуйте переписать пару своих старых макетов на флексбокс — и вы почувствуете разницу. А если хотите прокачаться в верстке профессионально, заглядывайте в студию, которая знает о гибкой верстке всё.

Студия WNDER