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

Digital-студия WNDER

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

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

Главное преимущество — простота. Раньше, чтобы сделать горизонтальное меню, приходилось мучиться с float и clear. Теперь достаточно написать display: flex — и всё. Flexbox автоматически решает большинство проблем с выравниванием и распределением пространства.

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

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

Пример:

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

И CSS:

.container {
  display: flex;
}

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

Главные свойства контейнера

Давайте разберем самые популярные свойства, которые задаются контейнеру. Я собрал их в таблицу — так нагляднее.

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

Разберем пару примеров. Допустим, вы хотите выровнять элементы по центру и по горизонтали, и по вертикали. Это одна из самых частых задач. Для этого нужно:

.container {
  display: flex;
  justify-content: center; /* по горизонтали */
  align-items: center; /* по вертикали */
  height: 100vh; /* задаем высоту, иначе не будет работать */
}

Вот и всё — ваш блок по центру. Раньше для этого приходилось использовать абсолютное позиционирование и отрицательные margin. Теперь — одна строка.

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

Но не только контейнер управляет раскладкой. Каждый элемент тоже может влиять на свое поведение. Вот основные свойства:

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

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

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

.item {
  flex: 1; /* каждый элемент занимает равную долю */
}

Или вы можете сделать так, чтобы один элемент был в два раза шире других:

.item-wide {
  flex: 2; /* этот элемент будет в два раза шире */
}

Типичные ошибки новичков и как их избежать

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

Ошибка 1: Забыли задать высоту контейнеру. Если вы хотите выровнять элементы по вертикали, но высота контейнера не задана (или равна auto), то align-items: center не сработает так, как вы ожидаете. Элементы просто выстроятся в ряд, и всё.

Ошибка 2: Используете Flexbox для сложных сеток. Flexbox отлично подходит для одномерных раскладок (ряд или колонка). Если вам нужна сетка с несколькими рядами и колонками, лучше использовать CSS Grid. Flexbox справится, но будет сложнее и менее предсказуемо.

Ошибка 3: Путаете justify-content и align-items. Запомните: justify-content работает вдоль главной оси (по умолчанию — горизонталь), а align-items — вдоль поперечной (вертикаль). Если вы поменяете направление через flex-direction: column, то оси поменяются местами. Это сбивает с толку, но со временем привыкаешь.

Ошибка 4: Игнорируете flex-wrap. По умолчанию flex-элементы не переносятся на новую строку. Если места мало, они будут сжиматься или вылезать за пределы. Добавьте flex-wrap: wrap, чтобы элементы переносились, как в обычном тексте.

Лайфхак: Если вы хотите быстро отцентрировать элемент, не задумываясь, используйте этот сниппет: display: flex; justify-content: center; align-items: center;. Это работает почти всегда (если задана высота). Держите его под рукой — он спасет вас не раз.

Практический пример: создаем карточку товара

Давайте применим знания на практике. Сделаем простую карточку товара с изображением, названием, ценой и кнопкой. Вот HTML:

<div class="card">
  <img src="product.jpg" alt="Товар" class="card-image">
  <div class="card-body">
    <h3 class="card-title">Крутая футболка</h3>
    <p class="card-price">1990 руб.</p>
    <button class="card-button">Купить</button>
  </div>
</div>

Теперь CSS с использованием Flexbox:

.card {
  display: flex;
  flex-direction: column; /* располагаем элементы вертикально */
  width: 300px;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

.card-image {
  width: 100%;
  height: auto;
}

.card-body {
  display: flex;
  flex-direction: column;
  padding: 15px;
  flex: 1; /* чтобы тело карточки занимало всю оставшуюся высоту */
}

.card-title {
  margin: 0 0 10px;
}

.card-price {
  margin: 0 0 15px;
  color: #333;
}

.card-button {
  margin-top: auto; /* прижимаем кнопку к низу */
  padding: 10px;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

Обратите внимание на margin-top: auto у кнопки. Это маленькая хитрость: auto-отступы в Flexbox работают как поглотители свободного пространства. Они прижимают элемент к концу контейнера. Так вы можете размещать кнопку внизу карточки, даже если остальное содержимое короткое.

Заключение

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

В итоге: вы научились центрировать элементы, делать колонки, управлять порядком и размерами. Этого достаточно, чтобы верстать большинство интерфейсов. А если понадобится что-то сложнее — смело переходите к CSS Grid, но это уже другая история.

Практикуйтесь на реальных макетах, и скоро вы будете делать раскладку на глаз, без гугления. Удачи!

Студия WNDER — создаем сайты и приложения, которые работают.