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

Digital-студия WNDER

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

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

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

Основная идея: вы создаете контейнер с display: flex, и его прямые дети автоматически становятся «флекс-элементами». Дальше вы управляете ими через свойства контейнера и самих элементов. Звучит сложно? На деле — проще простого.

Основные свойства контейнера

Чтобы включить Flexbox, достаточно написать display: flex родителю. Но дальше начинается магия. Вот список главных свойств, которые вы будете использовать каждый день.

Свойство Что делает Пример значения
flex-direction Задает направление элементов: в ряд или в колонку row, column
justify-content Выравнивает элементы по главной оси (горизонтально, если row) center, space-between
align-items Выравнивает элементы по поперечной оси (вертикально, если row) center, stretch
flex-wrap Разрешает перенос элементов на новую строку, если не влезают wrap, nowrap
gap Задает расстояние между элементами 10px, 1rem

Смотрите, как просто. Хотите отцентрировать блок по центру экрана? Пишите:

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

И все — блок по центру. Никаких танцев с бубном. Это, кстати, одно из самых частых применений флексбокса.

Свойства элементов: как управлять детьми

Теперь поговорим о самих флекс-элементах. У них есть свои свойства, которые позволяют управлять размером и поведением.

  • flex-grow — насколько элемент может расти, чтобы заполнить свободное место. По умолчанию 0, то есть не растет.
  • flex-shrink — насколько элемент может сжиматься, если не хватает места. По умолчанию 1.
  • flex-basis — базовый размер элемента до того, как он начнет расти или сжиматься.
  • align-self — переопределяет выравнивание для конкретного элемента, игнорируя align-items контейнера.
  • order — меняет порядок элемента без изменения HTML. По умолчанию 0.

Чаще всего используют сокращение flex. Например, flex: 1 означает, что элемент будет занимать все доступное пространство поровну с другими такими же. Это удобно для создания колонок равной ширины.

Пример: делаем три колонки одинаковой ширины.

.container {
  display: flex;
}
.column {
  flex: 1;
}

Вот и все. Три колонки растянутся равномерно. Если захотите, чтобы средняя была в два раза шире, задайте ей flex: 2.

Реальные примеры: от шапки до карточек

Теория — это хорошо, но давайте посмотрим, как Flexbox применяется в реальной верстке. Вот несколько типовых сценариев.

Шапка сайта с логотипом и меню

<header class="header">
  <div class="logo">Логотип</div>
  <nav class="menu">
    <a href="#">Главная</a>
    <a href="#">О нас</a>
    <a href="#">Контакты</a>
  </nav>
</header>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

Логотип слева, меню справа, все по центру вертикали. Красиво и без усилий.

Карточки товаров в ряд

<div class="cards">
  <div class="card">Товар 1</div>
  <div class="card">Товар 2</div>
  <div class="card">Товар 3</div>
</div>
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.card {
  flex: 1 1 200px; /* растет, сжимается, базовый размер 200px */
}

Карточки сами переносятся на новую строку, если не влезают. На мобильном они станут в одну колонку, если поставить flex-direction: column через медиазапрос.

Центрирование модального окна

.overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
}

Модалка всегда по центру, даже если контент внутри меняется. Удобно.

Лайфхак: Если нужно сделать «липкий» футер, который прижимается к низу страницы, используйте display: flex на body и задайте flex: 1 основному контенту. Футер всегда будет внизу, даже если контента мало.

Частые ошибки и как их избежать

Flexbox кажется простым, но новички часто наступают на грабли. Вот топ ошибок.

  • Забыли про flex-wrap. Если элементы не влезают, они сжимаются до безобразия. Добавьте flex-wrap: wrap, чтобы они переносились.
  • Путаница с осями. justify-content работает по главной оси, align-items — по поперечной. Если поменяли flex-direction на column, оси меняются местами. Не путайтесь.
  • Применение свойств не к тому элементу. display: flex задается родителю, а не ребенку. Свойства вроде flex-grow — детям, а не родителю.
  • Игнорирование gap. Раньше использовали margin, но gap проще и не создает лишних отступов по краям.

Еще одна частая проблема — когда нужно сделать сетку с одинаковыми колонками, но разным контентом. Используйте align-items: stretch (по умолчанию), чтобы все колонки были одинаковой высоты. Это бесплатно и работает.

Почему Flexbox — это не панацея, но лучший друг

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

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

И не бойтесь экспериментировать. Откройте DevTools в браузере, меняйте свойства в реальном времени и смотрите, что происходит. Это лучший способ понять, как работает Flexbox.

Итог

Flexbox — это мощный и простой инструмент для верстки. Вы научились основным свойствам: flex-direction, justify-content, align-items, flex-wrap и gap. Узнали, как управлять элементами через flex-grow, flex-shrink и order. Посмотрели примеры из реальной жизни.

Теперь практика — ваш лучший друг. Откройте редактор, создайте простую страницу и попробуйте применить все, что узнали. Через пару часов вы будете чувствовать себя уверенно, а через неделю — верстать как профи.

И помните: если что-то не получается, всегда можно заглянуть в документацию или потыкать в DevTools. В конце концов, даже опытные разработчики иногда забывают, какая ось главная.

Студия WNDER