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

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

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

Flexbox работает по принципу оси: главная (main axis) и поперечная (cross axis). Элементы располагаются вдоль главной оси. По умолчанию она идёт слева направо, но это можно изменить. Всё просто: контейнер становится гибким, а его дети — гибкими элементами.

Как включить Flexbox и начать с ним работать

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

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

<style>
  .container {
    display: flex;
    border: 2px solid blue;
    padding: 10px;
  }
  .item {
    background: lightblue;
    margin: 5px;
    padding: 20px;
    text-align: center;
  }
</style>

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

Основные свойства Flexbox для контейнера

У контейнера есть несколько ключевых свойств. Вот они в таблице:

Свойство Что делает Пример значения
flex-direction Задаёт направление главной оси row, column, row-reverse
flex-wrap Разрешает перенос элементов на новую строку nowrap, wrap, wrap-reverse
justify-content Выравнивание по главной оси center, space-between, flex-start
align-items Выравнивание по поперечной оси center, stretch, flex-end

Например, чтобы выровнять элементы по центру и по горизонтали, и по вертикали, пишем:

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

Это работает, как магия. Раньше для этого приходилось использовать position: absolute и трансформации.

Правило: Если хочешь выровнять блок по центру — используй display: flex с justify-content: center и align-items: center. Это самый простой способ.

Свойства для дочерних элементов (flex-элементов)

Каждый дочерний элемент тоже можно настраивать. Вот основные свойства:

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

Часто используют сокращённое свойство flex. Например:

.item {
  flex: 1 1 200px; /* grow shrink basis */
}

Это значит: элемент может расти и сжиматься, начальный размер — 200 пикселей.

Если задать всем элементам flex: 1, они займут всю ширину контейнера поровну. Удобно для сеток.

Практический пример: адаптивная галерея

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

<div class="gallery">
  <div class="photo">Фото 1</div>
  <div class="photo">Фото 2</div>
  <div class="photo">Фото 3</div>
  <div class="photo">Фото 4</div>
  <div class="photo">Фото 5</div>
</div>

<style>
  .gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .photo {
    flex: 1 1 200px;
    background: #ddd;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #aaa;
  }
</style>

Здесь flex-wrap: wrap позволяет элементам переноситься, а gap задаёт расстояние между ними. Элементы растягиваются, чтобы заполнить строку, но минимальная ширина — 200 пикселей.

Если нужно, чтобы все элементы были одинаковой ширины, используй flex: 1 без flex-basis. Но тогда они будут сжиматься до очень маленьких размеров. Лучше задать базовый размер.

Лайфхак: Свойство gap работает в Flexbox с 2021 года. Раньше для отступов использовали margin, но gap удобнее — он не добавляет лишних отступов по краям.

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

Вот несколько типичных проблем:

  • Забыл задать display: flex. Без этого свойства Flexbox не работает. Проверь контейнер.
  • Путаница с осями. Главная ось — это направление, заданное flex-direction. Поперечная — перпендикулярна ей. Если не понимаешь, рисуй на бумаге.
  • Использование align-items вместо justify-content. Первое выравнивает по поперечной оси, второе — по главной. Легко перепутать.
  • Элементы не переносятся. По умолчанию flex-wrap: nowrap. Добавь flex-wrap: wrap.

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

Заключение

Flexbox — это мощный инструмент, который делает вёрстку простой и предсказуемой. Главное — запомнить, что он работает на контейнере и его детях. Освой несколько свойств: display: flex, justify-content, align-items, flex-wrap и flex. Этого достаточно для 90% задач. Практикуйся на простых макетах, и скоро ты будешь верстать быстрее и без головной боли.

Кстати, если ты PHP-разработчик, Flexbox пригодится тебе для админок и интерфейсов. Не бойся экспериментировать. Удачи!

Студия WNDER