HTML. Флексбокс. Алгоритм flex-shrink
Ричард Молотов

Здрасте! Суть темы ясна уже в названии. Прошу помочь «Элиту из элит» HTML программистов, тех кто разобрался в самых мелких нюансах.** Покажите рабочий алгоритм расчета размера flex-элемента с заданым свойством flex-shrink.**

Я понял как работает алгоритм flex-grow:
+++++++++++++++++
Это простой пример где у ф-элементов не задан размер для зон padding, border и margin. Есть ф-контейнер внутри которого есть ф-элемент "A" и ф-элемент "B". Размер content'ной зоны ф-контейнера по главной оси - 300px. Полный размер ф-элемента "A" по главной оси - 50px, полный размер ф-элемента "B" по главной оси - 50px. Свойство flex-grow у ф-элемента "A" задано в 1, flex-grow у ф-элемента "B" задано в 3.
* Свободное место = 300px - (50px + 50px) = 200px
* Доля свободного места = 200px / (1 + 3) = 50px
* Итоговый размер ф-элемента "A" = 50px + (50px * 1) = 100px
* Итоговый размер ф-элемента "B" = 50px + (50px * 3) = 200px

+++++++++++++++++
Но так и не понял как работает алгоритм вычисления места ф-элемента с flex-shrink. Нарыл немного инфы, потестил, в итоге работает когда как...

+++++++++++++++
Например, есть размер ф-контейнера по главной оси 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 * ф-элем)) * (отритцательное пространство))

200 - (((1 * 200) / (1 * 200 + 1 * 200 + 1 * 200 + 1 * 500)) * (-100))

?????
Алгоритм ... : полный размер ф-элемента, content,padding,border,margin - алгоритм нормально работает со всеми задаными зонами. Нормально работает в случае если одному или нескольким ф-элементам задан flex-shrink: 0; . Неправильно вычисляет если у ф-элемов разные размеры по главной оси.

+++++
Ф-контейнер - элемент с заданым display: flex;
Ф-элемент - дочерный элемент ф-контейнера. То есть находящийся в первом уровне вложености в ф-контейнер.

Ричард Молотов около 1 месяца назадСпасибо 1
1 чел.