Flexbox в деталях: wrap, order, grow, shrink, basis и их комбинации

Основы Flexbox: Начинаем с главного

Flexbox — это модуль CSS, который позволяет легко управлять расположением элементов внутри контейнера. Он особенно удобен для создания адаптивных макетов без лишних танцев с float и position.

Вот базовые свойства, которые нужно знать:

.container {
  display: flex; /* Активируем Flexbox */
  flex-direction: row | row-reverse | column | column-reverse; /* Направление элементов */
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly; /* Выравнивание по главной оси */
  align-items: flex-start | flex-end | center | stretch | baseline; /* Выравнивание по поперечной оси */
}

Но сегодня мы разберём продвинутые свойства, которые дают гибкость (в прямом смысле слова) вашему вёрстку.

flex-wrap: Когда элементы не помещаются в одну строку

По умолчанию Flexbox пытается уместить все элементы в одну строку (или столбец), сжимая их ширину. Но что, если мы хотим переносить элементы на новую строку?

Значения:
- nowrap (по умолчанию) — элементы не переносятся.
- wrap — перенос на новую строку, если не хватает места.
- wrap-reverse — перенос, но в обратном порядке.

.container {
  display: flex;
  flex-wrap: wrap; /* Элементы будут переноситься */
}

🔥 Совет: Комбинация flex-direction: row + flex-wrap: wrap часто используется для адаптивных сеток.

order: Меняем порядок элементов без перестановки в HTML

Хотите, чтобы кнопка "Купить" была первой в мобильной версии, но последней на десктопе? Без проблем!

Как работает:
- По умолчанию все элементы имеют order: 0.
- Чем меньше значение, тем раньше элемент отображается.

.item-1 { order: 2; } /* Будет после item-2 и item-3 */
.item-2 { order: 1; } /* Будет после item-3, но перед item-1 */
.item-3 { order: -1; } /* Будет первым */

⚠️ Важно: Меняет только визуальный порядок, не влияет на DOM или доступность.

flex-grow, flex-shrink, flex-basis: Полный контроль над размерами

Эти три свойства управляют тем, как элементы растягиваются (grow), сжимаются (shrink) и какой базовый размер (basis) имеют.

flex-grow — кто займёт свободное место

Определяет, насколько элемент может увеличиться относительно других.

.item {
  flex-grow: 1; /* Заберёт всё свободное место */
}

Если у одного элемента flex-grow: 2, а у другого flex-grow: 1, первый займёт в 2 раза больше свободного пространства.

flex-shrink — кто сожмётся сильнее

Определяет, насколько элемент может уменьшиться при нехватке места.

.item {
  flex-shrink: 0; /* Не сжимается вообще (например, для фиксированных сайдбаров) */
}

flex-basis — базовый размер до распределения места

Аналог width, но с приоритетом в Flexbox.

.item {
  flex-basis: 200px; /* Стартовый размер 200px */
}

💡 Частая комбинация: flex: 1 0 200px →
- 1 — может расти (grow)
- 0 — не сжимается (shrink)
- 200px — базовый размер (basis)

Комбинируем: Практический пример

Допустим, у нас есть адаптивная карточка товара:

<div class="product-card">
  <div class="image">...</div>
  <div class="title">...</div>
  <div class="price">...</div>
</div>

.product-card {
  display: flex;
  flex-wrap: wrap; /* Переносим элементы при нехватке места */
}

.image {
  flex: 0 0 150px; /* Фиксированная ширина, не растёт и не сжимается */
}

.title {
  flex: 1 1 200px; /* Занимает оставшееся место, но не меньше 200px */
}

.price {
  order: -1; /* Выводим цену первой на мобильных */
}

Итог

• flex-wrap — контролирует перенос элементов.
• order — меняет визуальный порядок без изменений в HTML.
• flex-grow, flex-shrink, flex-basis — управляют размерами элементов.

Теперь ваш Flexbox-арсенал стал мощнее! 🎯 Экспериментируйте и комбинируйте свойства — они созданы для гибкости (во всех смыслах).