Объясните, пожалуйста! Расчёт итогового размера с flex-grow [9/28]

Курсы §36. Флексбокс, часть 2
1

Здравствуйте! В задании говорится:

Для верхнего блока с енотами хочется задать коэффициенты 1 и 2. Но нужные размеры блоков получаются с коэффициентами 1 и 3. Давайте посчитаем:

Свободное место = 300px - (50px * 2) = 200px
Доля свободного места = 200px / (1 + 3) = 50px
Итоговый размер зелёного енота = 50px + (50px * 1) = 100px
Итоговый размер коричневого енота = 50px + (50px * 3) = 200px

Но по факту коэффициенты flex-grow у .spot-1 .racoon-green и .spot-1 .racoon-brown равны 1 и 2 , и не 1 и 3. Почему?

1 лайк
2

В последнем абзаце теории к этому заданию написано:

Тонкость. На размер оставшегося свободного места влияет не только flex-basis, но и рамки, и отступы. Если flex-basis явно задано нулевое значение, то min-width на размер свободного места влиять не будет, так как ограничения размеров к флекс-элементам применяются уже после перераспределения свободного места.

В style.css к заданию 9 есть вот такой кусочек кода:

.spot-1 .skate {
min-width: 50px;
flex-basis: 0;
}

Таким образом минимальная ширина в данном случае будет считаться равной нулю. В 8-м же задании базовый размер флекс-элемента был задан вот так: flex-basis: 50px, потому ширина двух енотов считалась за 100 пикселей.

3 лайка