Помните то чувство, когда вы пытаетесь выровнять блок по центру, а он упрямо прилипает к левому краю? Или когда нужно сделать три колонки одинаковой высоты, а они ведут себя как капризные дети? Знакомо. Раньше для этого приходилось танцевать с бубном вокруг float, clearfix и таблиц. Но потом появился Flexbox. И жизнь стала проще. В этой статье я расскажу, как с его помощью верстать быстро, гибко и без головной боли. Даже если вы никогда не слышали про flex.

Что такое Flexbox и с чем его едят

Flexbox — это модуль CSS, который позволяет управлять расположением элементов в контейнере. Представьте, что у вас есть коробка (flex-контейнер), а внутри — несколько предметов (flex-элементы). Вы можете сказать: «Эй, ребята, стройтесь в ряд» или «Теперь в колонку». Можете приказать: «Растянитесь на всю ширину» или «Прижмитесь к правому краю». И они послушаются. Без магии, без костылей.

Главное преимущество Flexbox — он работает в одном направлении: либо по горизонтали (ряд), либо по вертикали (колонка). Это идеально для меню, карточек товаров, шапок сайтов и прочих линейных структур.

Правило №1: Flexbox — это про контейнер и его детей. Вы включаете flex у родителя, а дети подчиняются его правилам. Не пытайтесь применить flex к самим элементам — это не сработает.

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

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

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

Этих пяти свойств достаточно, чтобы решить 90% задач. Остальное — детали.

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

А теперь поговорим о том, как управлять самими детьми внутри контейнера. У каждого элемента тоже есть свои настройки.

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

Чаще всего используют flex-grow и flex-basis. Например, чтобы сделать адаптивные карточки.

Живой пример: верстаем карточки товаров

Давайте представим, что у нас есть интернет-магазин. Нужно вывести три карточки товара в ряд, чтобы они были одинаковой высоты и красиво распределялись. Без Flexbox это была бы боль. С ним — пара строк.

<div class="cards">
  <div class="card">Товар 1</div>
  <div class="card">Товар 2</div>
  <div class="card">Товар 3</div>
</div>
.cards {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.card {
  flex: 1;
  background: #f9f9f9;
  padding: 20px;
}

Что здесь происходит? display: flex делает контейнер гибким. justify-content: space-between раскидывает карточки с равными отступами по краям. gap: 20px добавляет расстояние между ними. А flex: 1 — это сокращение для flex-grow: 1, flex-shrink: 1, flex-basis: 0. То есть все карточки будут одинаковой ширины и растянутся на всю доступную ширину.

Хотите добавить еще одну карточку? Просто вставьте в HTML — она автоматически подстроится.

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

Как Flexbox помогает в реальных проектах

Я как PHP-разработчик часто сталкиваюсь с тем, что бэкенд генерирует HTML, а фронтенд должен это красиво отобразить. Например, выводится список пользователей, и неизвестно, сколько их будет — 2 или 20. Flexbox решает эту проблему: контейнер сам распределит элементы.

Вот пример на PHP, который рендерит карточки пользователей:

<?php
$users = [
  ['name' => 'Иван', 'age' => 25],
  ['name' => 'Мария', 'age' => 30],
  ['name' => 'Петр', 'age' => 28],
];
?>
<div class="users">
  <?php foreach ($users as $user): ?>
    <div class="user-card">
      <h3><?= $user['name'] ?></h3>
      <p>Возраст: <?= $user['age'] ?></p>
    </div>
  <?php endforeach; ?>
</div>

Добавляем CSS с Flexbox — и готово. Никаких лишних заморочек с float или inline-block.

Частые ошибки новичков

Даже с Flexbox можно наступить на грабли. Вот три самые популярные ошибки.

  1. Забыть про display: flex. Без него свойства flex не работают. Проверьте, что вы применили его к родителю.
  2. Путать justify-content и align-items. Первый работает по главной оси, второй — по поперечной. Если flex-direction: row, то justify-content — это горизонталь, align-items — вертикаль. Запомните: justify — это «по тексту» (горизонталь), align — «поперек» (вертикаль).
  3. Использовать margin для отступов между элементами. Лучше используйте gap. Он чище и не ломает выравнивание.
Правило №2: Если что-то не выравнивается — проверьте, не мешает ли ширина или высота самого контейнера. Иногда flex-элементы не могут растянуться, потому что у родителя нет заданной высоты.

Что в итоге

Flexbox — это не rocket science. Это просто инструмент, который делает верстку предсказуемой и быстрой. Освоив пять свойств контейнера и пару свойств элементов, вы забудете про танцы с бубном. Начните с малого: выровняйте текст по центру, сделайте меню в шапке, растяните карточки. А дальше — больше.

Помните: главное — практика. Откройте редактор, напишите несколько примеров, сломайте их, почините. И тогда Flexbox станет вашим лучшим другом.

Студия WNDER