Flexbox: flex-grow, flex-shrink, flex-wrap, flex-flow и order

Flexbox — удобный инструмент для адаптивных макетов: flex-grow управляет расширением элементов, flex-shrink — их сжатием, flex-wrap/flex-flow — переносом на новую строку или колонку, а order — порядком отображения. В статье есть примеры кода, краткие шаблоны, чеклисты для разных ролей и рекомендации, когда лучше использовать альтернативы (например, CSS Grid или медиазапросы).

К чему служит эта статья

Это практическое руководство по ключевым свойствам CSS Flexbox: flex-grow, flex-shrink, flex-wrap, flex-flow и order. Вы получите простые примеры, подсказки по отладке и готовые чеклисты для дизайнеров и фронтенд‑разработчиков.

Введение: когда выбирать Flexbox

Flexbox оптимален для распределения элементов по одной оси (строка или колонка) и для случаев, когда элементы должны адаптироваться к доступному пространству. Если вам нужна двумерная сетка (ряд и колонка одновременно) или сложные позиционирования, рассмотрите CSS Grid.

Важно: flexbox не отменяет семантику DOM — используйте порядок и aria‑атрибуты, если визуальный порядок отличается от логического.

Как настроить flex display

Если вы не знакомы с основами flexbox, начните с простого контейнера и дочерних элементов: оберните элементы в родительский div (flex‑контейнер).

Добавьте к родителю свойство display: flex.

.parent {  
  display: flex;  
}

Краткое определение терминов

• Flex container — родительский элемент с display: flex.
• Flex item — прямой потомок flex container.
• Main axis — главная ось (по умолчанию — горизонтальная).
• Cross axis — поперечная ось (перпендикулярна главной).

Как элементы растут внутри контейнера (flex-grow)

flex-grow указывает, в каком отношении свободное пространство будет распределено между элементами. Значение — неотрицательное число (по умолчанию 0).

Пример: пять элементов, у одного flex-grow: 3 — он попытается занять в три раза больше дополнительного пространства, чем элементы с flex-grow: 1.

.parent {  
 width: 500px;  
 display: flex;   
}  

Если у всех элементов flex-grow: 0 (значение по умолчанию), свободное пространство не распределяется — элементы сохраняют свои размеры. Если у всех flex-grow: 1 — все будут расширяться одинаково.

Советы и подводные камни

• flex-grow распределяет только свободное пространство; если у элементов уже заданы фиксированные ширины и сумма превышает контейнер, дополнительного пространства не будет.
• Не используйте очень большие коэффициенты без причины — это затруднит предсказуемость макета.

Как элементы сжимаются внутри контейнера (flex-shrink)

Когда сумма ширин элементов превышает ширину контейнера, браузер применяет правило сжатия. flex-shrink задаёт коэффициент, по которому элементы будут уменьшаться.

Пример:

.parent {  
  width: 500px;  
  display: flex;   
}  

.parent div {  
  width: 150px;  
  height: 150px;  
}

Если у всех flex-shrink: 1 — все сожмутся одинаково. Если у одного элемента коэффициент больше (например, 2), он сократится сильнее.

Советы

• flex-shrink работает относительно базовой величины элемента (base size), которая учитывает width/height и содержимое.
• Для предотвращения сжатия используйте min-width или flex: 0 0 auto.

Как переносить элементы на следующую строку (flex-wrap)

flex-wrap позволяет элементам переходить на новую строку (или столбец) при нехватке места. По умолчанию контейнер не переносит элементы (nowrap).

Варианты:

flex-wrap: nowrap | wrap | wrap-reverse

Пример:

.parent {  
  width: 300px;  
  border: 1px solid black;  
  display: flex;  
  flex-wrap: wrap;  
}  
.parent div {  
  width: 100px;  
  height: 100px;  
}

wrap располагает строки сверху вниз; wrap-reverse — в обратном порядке по кросс‑оси (строки собираются снизу вверх).

Если вы задали высоту родителя, между строками может появиться пространство. Чтобы устранить дополнительный промежуток, используйте align-content: flex-start.

.parent {   
    width: 300px;   
    height: 300px;  
    border: 1px solid black;   
    display: flex;  
    flex-wrap: wrap;   
    align-content: flex-start;  
}

align-content управляет распределением строк по поперечной оси и действует только при наличии нескольких строк.

Перенос по колонке и комбинированные направления (flex-flow)

flex-flow — это сокращённая запись для flex-direction и flex-wrap. Она позволяет, например, задать колонную раскладку с переносом.

flex-flow:  ;

Примеры комбинаций:

row nowrap | column nowrap | row wrap | column wrap | row wrap-reverse | column wrap-reverse

.parent {  
    width: 300px;   
    border: 1px solid black;   
    display: flex;     
    flex-flow: column wrap;  
}  
.parent div {  
  width: 100px;  
  height: 100px;  
}

flex-flow полезен, когда нужно изменить направление главной оси и одновременно включить переносы.

Как изменить визуальный порядок элементов (order)

Свойство order позволяет задать порядок отображения flex‑элементов. Элементы сортируются по числовому значению order (сначала меньшие значения).

Если в документе логический порядок важен (например, для скринридеров), не меняйте только визуальный порядок: синхронизируйте порядок DOM или добавьте aria‑метки.

Шпаргалка: самые часто используемые сокращения

• flex: 1 — часто используется как эквивалент flex-grow: 1; flex-shrink: 1; flex-basis: 0% (но уточните поведение в вашем коде).
• flex: 0 0 auto — элемент не растёт и не сжимается и сохраняет размер по содержимому.
• align-items — выравнивает элементы по поперечной оси (stretch, center, start, end, baseline).
• justify-content — выравнивает элементы по главной оси (flex-start, center, space-between и т. д.).

Быстрые примеры и конфигурации (cheat sheet)

• Простая линия кнопок, равномерные интервалы:

.container { display: flex; gap: 12px; }
.container button { flex: 1; }

• Сайдбар фиксированной ширины + динамический контент:

.parent { display: flex; }
.sidebar { width: 260px; flex: 0 0 260px; }
.main { flex: 1 1 auto; }

• Грид‑подобная раскладка одной оси (на ряд переносы):

.grid--row { display: flex; flex-wrap: wrap; gap: 16px; }
.grid--row > * { flex: 1 1 240px; }

Когда Flexbox даёт сбой: ограничения и альтернативы

Когда не стоит использовать только flexbox:

• Двумерная сетка (таблица, сложная сетка): используйте CSS Grid.
• Точный контроль ширины/высоты ячеек по строкам и колонкам — Grid более предсказуем.
• Если вам нужен адаптивный макет с ключевыми переломами по точкам: комбинируйте flexbox с медиазапросами.

Альтернативные подходы:

• CSS Grid — для сложных двумерных макетов.
• Медиазапросы — для изменения структуры при ключевых ширинах экрана.
• Inline‑block / float — устаревшие приёмы, применяются редко.

Психологические модели и эвристики при проектировании макетов

• Думайте о flex как о «потоке топлива»: flex-grow — как скорость потребления топлива каждым контейнером, flex-shrink — как степень сжатия при дефиците.
• Всегда задавайте базовые размеры (flex-basis / width) для предсказуемости.
• Сначала проектируйте на маленьком экране, затем масштабируйте — чаще всего это проще.

Чеклист для ролей

Для дизайнера

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

Для фронтенд‑разработчика

• Добавить flex контейнеры там, где нужно выравнивать элементы по одной оси.
• Использовать flex: для краткости и предсказуемости.
• Проверить поведение на старых браузерах при необходимости (autoprefixer).
• Убедиться, что скринридеры читают контент в корректном порядке.

Решение: когда использовать flex-grow vs flex-basis vs width

• flex-basis задаёт исходный размер элемента перед распределением свободного пространства.
• width устанавливает фактическую ширину и может переопределить базу у flex‑элемента при определённых записях.
• Используйте flex: 0 1 auto, если хотите полагаться на width/height, но при этом оставлять возможность сжатия.

Decision flow: выбрать свойство flex

flowchart TD
  A[Нужно ли выравнивать по одной оси?] -->|Да| B[Есть ли двумерная сетка?]
  B -->|Да| C[Используйте CSS Grid]
  B -->|Нет| D[Требуется перенос элементов?]
  D -->|Да| E{Нужны переносы по строкам или колонкам?}
  E -->|Строки| F[flex-wrap: wrap;]
  E -->|Колонки| G[flex-flow: column wrap;]
  D -->|Нет| H[flex без wrap]
  H --> I{Нужно, чтобы элементы растягивались?}
  I -->|Да| J[flex-grow]
  I -->|Нет| K[flex-shrink / фиксированные размеры]

Критерии приёмки

• Макет корректно отображается на ключевых ширинах: 320px, 768px, 1024px, 1440px.
• Визуальный порядок элементов согласован с логикой приложения и доступностью.
• Нет непредвиденных переносов или перекрытий при уменьшении ширины.

Тест‑кейсы и приёмочные проверки

• Уменьшите ширину окна постепенно — элементы должны корректно сжиматься, переноситься или занимать доступную ширину в зависимости от настроек.
• Проверьте, что элементы с order остаются доступными для клавиатурной навигации в ожидаемом порядке.
• Отключите CSS‑свойство flex и убедитесь, что страницы не теряют содержимого и остаются читаемыми.

Короткая методика отладки

1. Включите outline у всех элементов: * { outline: 1px solid rgba(0,0,0,0.1);} и смотрите, как распределяются размеры.
2. Уменьшайте/увеличивайте flex‑коэффициенты и наблюдайте влияние.
3. Временно назначьте фиксированные width/height, чтобы понять поведение базовых размеров.
4. Используйте инструменты инспектора браузера для подсказок (Flexbox Inspector в Firefox/Chrome).

1‑линейный глоссарий

• flex-grow: коэффициент расширения;
• flex-shrink: коэффициент сжатия;
• flex-wrap: включение переноса;
• flex-flow: сочетание направления и переноса;
• order: визуальный порядок элементов.

Заключение

Flexbox — мощный и гибкий инструмент для большинства однострочных и одноосных макетов. Используйте flex-grow и flex-shrink для контроля размеров, flex-wrap/flex-flow для переноса и order для перестановки. При необходимости комбинируйте с CSS Grid и медиазапросами для сложных макетов.

Важно: тестируйте на реальных устройствах и учитывайте доступность при изменении визуального порядка.

Ссылка на живые демо и примеры в CodePen поможет отладить и подстроить параметры под ваш проект.