Когда-то верстка сайтов напоминала игру в тетрис: блоки приходилось подгонять с помощью float, clearfix и таблиц. Flexbox изменил всё. Это мощный инструмент, который позволяет располагать элементы на странице гибко, без лишних танцев с бубном. В этой статье я расскажу, как использовать Flexbox на практике, и покажу примеры кода, которые можно сразу применить.

Почему Flexbox — это круто?

Flexbox (Flexible Box Layout) — это CSS-модуль для создания одномерных макетов. Простыми словами, он помогает распределять пространство между элементами и выравнивать их в строке или колонке. Раньше для этого приходилось использовать сложные хаки, а теперь достаточно пары строк кода. Основное преимущество — адаптивность. Элементы сами подстраиваются под размер экрана, не ломая дизайн.

Основные свойства Flexbox

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

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

Например, чтобы сделать горизонтальное меню с равномерными отступами, пишем:

.menu {
  display: flex;
  justify-content: space-around;
  gap: 15px;
}

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

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

<div class="product-list">
  <div class="product-card">
    <h3>Товар 1</h3>
    <p>Описание</p>
    <span>Цена: 1000 руб.</span>
  </div>
  <div class="product-card">
    <h3>Товар 2</h3>
    <p>Описание</p>
    <span>Цена: 1500 руб.</span>
  </div>
</div>

CSS для списка товаров:

.product-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}
.product-card {
  flex: 1 1 300px; /* Растет, сжимается, базовая ширина 300px */
  border: 1px solid #ccc;
  padding: 15px;
}

Теперь карточки автоматически переносятся на новую строку, если не влезают. А PHP-код для вывода может выглядеть так:

$products = [['name' => 'Товар 1', 'price' => 1000], ['name' => 'Товар 2', 'price' => 1500]];
?>
<div class="product-list">
  <?php foreach ($products as $product): ?>
    <div class="product-card">
      <h3><?= htmlspecialchars($product['name']) ?></h3>
      <p>Описание</p>
      <span>Цена: <?= $product['price'] ?> руб.</span>
    </div>
  <?php endforeach; ?>
</div>
Правило: Используйте flex: 1 1 300px для создания резиновых карточек. Первое число — коэффициент роста, второе — сжатия, третье — базовая ширина. Это позволяет элементам занимать доступное пространство, но не становиться уже 300px.

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

Flexbox позволяет менять порядок элементов без изменения HTML. Свойство order задает очередность. Например, если нужно, чтобы второй элемент был первым:

.product-card:nth-child(2) {
  order: -1;
}

Также удобно центрировать блоки. Чтобы выровнять элемент по центру контейнера, используйте:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Высота на весь экран */
}

Это работает для модальных окон или логотипов.

Адаптивность без медиа-запросов

Flexbox сам по себе адаптивен, но с помощью flex-wrap и flex-basis можно создавать макеты, которые подстраиваются под экран. Например, для двух колонок на десктопе и одной на мобильном:

.row {
  display: flex;
  flex-wrap: wrap;
}
.column {
  flex: 1 1 50%; /* Две колонки */
}
@media (max-width: 600px) {
  .column {
    flex: 1 1 100%; /* Одна колонка */
  }
}

Но часто можно обойтись без медиа-запросов, задав минимальную ширину через min-width.

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

  • Забыли display: flex. Без этого свойства flexbox не работает. Проверьте контейнер.
  • Игнорирование gap. В старых браузерах gap не поддерживался, но сейчас везде работает. Используйте его вместо margin для отступов.
  • Слишком много вложенности. Flexbox не любит глубокую вложенность. Старайтесь делать структуру плоской.

Итог: Flexbox — это ваш друг. Он упрощает верстку, делает её гибкой и уменьшает количество CSS-кода. Начните с малого: выровняйте меню или карточки, а потом переходите к сложным макетам. Удачи!

Студия WNDER