Объясните пожалуйста алгоритм расчета итогового размера с flex-grow.
1 шаг. Рассчитываем свободное место во флекс-контейнере:
Свободное место = Ширина контейнера - Сумма базовых размеров элементов
2 шаг. Считаем размер минимальной доли свободного места:
Доля свободного места = Свободное место / Сумма flex-grow всех элементов
3 шаг. Базовый размер каждого флекс-элемента увеличиваем на размер минимальной доли свободного места умноженной на значение flex-grow этого элемента:
Итоговый размер = Базовый размер + (Доля свободного места * flex-grow)
2 шаг -Откуда мы возьмем сумму flex-grow всех элементов. Она же нам неизвестна. Значит мы не можем выяснить долю свободного места…
Я не понимаю эту формулу. В ней у нас два неизвестных значения.
Мне тоже это непонятно. Судя по всему, коэффициенты подбираются “методом тыка”, а формула нужна только для проверки… Или сначала подбирается первый коэффициент, затем по формуле пытаемся вычислить второй, как вариант. Но оба этих способа такое себе
L - длина (ширина) флекс-контейнера
Lсв - длина свободного пространства
L1…Ln - базовые длины флекс-элементов
L1св…Lnсв - длины флекс-элементов вместе с частью свободного пространства, которую они хотят захватить
n - количество флекс-элементов
1). Lсв = L-∑(L1…Ln)
2). (L1св-L1)/Lсв, (L2св-L2)/Lсв,…, (Lnсв-Ln)/Lсв
После деления и получения одинакового знаменателя, верхняя часть дроби и будет коэффициентом flex-grow каждого элемента из множества элементов флекс-контейнера.
Пример(.spot-1):
(100px-50px)/200px=1/4, (200px-50px)/200px=3/4; коэффициенты: 1 и 3.
Пример(.spot-2):
(200px-100px)/300px=1/3, (300px-100px)/300px=2/3; коэффициенты: 1 и 2.
Всё таки мне непонятно. Предыдущее задание для spot-1 такие же дынные, итоговое решение совершенно другое.
Интуитивно понимаю следующим образом:
для spot-1
у нас 200 px свободного пространства и две карты по 50 px, которые надо растянуть одну до 100 px, вторую до 200px. Соответственно должен быть коэффициент 1 к 3 (как и есть в таком же задании в предыдущей теме)
для spot-2
у нас 400 px свободного пространства и те же 2 карты по 50px, которые надо растянуть одну до 200 px, вторую до 300 px. Соответственно должен быть коэффициент 3 к 5.
В решении коэффициенты другие. Почему?
