Испытание: мастер коэффициентов [14/28] 100%

Во флекс-шринк указывается доля базового размера элемента, которая должна “впитать” отрицательное пространство, то есть исчезнуть, отрезаться. Эта часть элемента как бы существует в отрицательном пространстве, а оставшаяся доля в видимом контейнере.
Например, у brick-4 итоговый видимый размер должен быть 150px, то есть лишние 50px, а именно ¼ от базового размера, должны оказаться в отрицательном пространстве, у оставшихся двух элементов по ¾ от базового размера урезаются и отправляются в отрицательное пространство. Вот и получается 1, 3, 3 или 2, 6, 6 или 25% 75% 75%(только без знаков процента) для brick-4, brick-5 и brick-6 соответственно.
А вот нормированный коэффициент сжатия показывает уже долю занимаемого элементом отрицательного пространства. Например, для brick-4 он 0.1, то есть 10% от -500px, то есть те самые 50px, которые мы у него отрезали.

Что касается флекс-гроу, то тут свободное пространство занимает 225px, которые надо распределить между элементами. Элементу brick-1 из них отдается 25px, то есть 1/9 от 225px, элементам brick-2 и brick-3 по 3/9 и 5/9 соответственно.

По крайней мере, так я поняла для себя.

Вот тут еще есть создана тема, посвященная этому вопросу flex-basis & flex-grow [8-9/28].

5 лайков