Я возмущен до глубины души! Второй день стёрт из моей жизни бесплодно! Второй день мучаюсь и не могу почувствовать тот кайф гордо выполненой работы, не могу сказать “Теперь я точно разобрался!”.
А все дело в flex-shrink, чей алгоритм просчетов я не могу выкусить. Находил несколько его версий, в итоге выбрал только 1 рабочий, тот который написан в этом курсе и на англоязычном сайте (одинаковый).
OOOOOOOOOOOO Такущие записи в черновике ОООООООООООО
Например, есть размер ф-контейнера по главной оси 600px и отритцательное пространство составляет -200px.
Сперва нужно умножить каждый полный размер ф-элемента с его значением flex-shrink и получившиеся значения сплюсовать.
ф-элем 1 (1 * 200) + ф-элем 2 (2 * 200) + ф-элем 3 (3 * 200) + ф-элем 4 (1 * 200) = TI 1400
Далее необходимо поделить каждый ф-элемент на значение TI. Ф-элем 2 например:
SF у ф-элема 2 = ф-элем 2 (2 * 200px) / TI (1400) = 0.286
Далее необоходимо умножить это с отритцательным пространством (-200px)
Место удаленное с ф-элема 2 = SF ф-элема 2 (0.286) * отритцательное пространство (-200px) = -57.142 . Округлено до -57.
Ну и нужно прибавить удаленное место с ф-элема 2 к размеру ф-элема 2.
Итоговый размер ф-элема 2 = полный размер ф-элема (200px) + место удаленное с ф-элема 2 (-57)
??? Имеющийся на данный момент алгоритм ,???
Полный размер ф-элема + (((flex-shrink * полный размер ф-элема) / (shrink * ф-элем + shrink * ф-элем + shrink * ф-элем + shrink * ф-элем)) * (отритцательное пространство))
100 + (((1 * 100) / (1 * 300 + 2 * 300 + 3 * 300)) * (-200))
Алгоритм … : полный размер ф-элемента, content,padding,border,margin - алгоритм нормально работает со всеми задаными зонами. Нормально работает в случае если одному или нескольким ф-элементам задан flex-shrink: 0; . Неправильно вычисляет если у ф-элемов разные размеры по главной оси.
OOOOOOOOOOOOОООООООООООООООООООООООО
Понимаете в чем прикол? Алгоритм ошибается на ~15px в тех случаях, когда расчитывается размер ф-элемента когда в одном ряду вместе с ним есть хотя бы 1 ф-элемент с другим размером по главной оси.
Ладно, объяснить все с нуля трудно, поэтому прошу крутых перцев, которые поняли как это работает - поделиться инфой - рабочим алгоритмом.
OOOOOOOOOOOOОООООООООООООООООООООООО
Уже сам нашел формулу расчетов методом проб и тестов, все ок.