Каждый элемент получает flex: grow shrink basis. Basis задаёт исходный размер по главной оси до распределения места. Grow участвует при избытке, shrink — когда исходные размеры не помещаются. Коэффициенты задают пропорции, а не пиксели, и зависят от остальных элементов той же линии.
Распределяйте свободное место
Если два элемента начинаются с 200px и остаётся 300px, grow 1 и 2 делят остаток на одну и две доли: 100px и 200px. До прочих ограничений размеры становятся примерно 300px и 400px. Нулевой grow исключает элемент из деления избытка. Процентный basis относится к внутреннему размеру контейнера, а auto опирается на применимый размер или содержимое и требует проверки с реальным текстом.
Считайте shrink согласованием, а не вычитанием
Нехватка места взвешивается и flex-shrink, и базовым размером, поэтому одинаковые коэффициенты не всегда отнимают одинаковое число пикселей у разных элементов. Минимальный размер по содержимому может остановить сжатие и вызвать overflow. FlexWeave выводит только flex: добавляйте min-width: 0 или другое ограничение в компоненте после проверки длинных слов, изображений, контролов и масштаба. Нулевой shrink сохраняет один элемент, но переносит нагрузку на соседей.
Проверьте реальный компонент
FlexWeave отображает проверенную визуальную модель текущим браузером, но не знает ваше содержимое, режим письма, фокусируемые элементы и диапазон ширин. Вставьте правила в реальный компонент, сохраните осмысленный порядок HTML и проверьте узкие экраны, масштаб, длинные переводы, клавиатуру и вспомогательные технологии. Обратное направление и order не подтверждают правильное чтение. Храните принятые CSS и HTML в системе контроля версий: капсула намеренно не сохраняет проект.