flex-basis & flex-grow [8-9/28]

Предлагаю вариант, как можно рассчитывать величины flex-grow при ненулевом flex-basis, т.к. вариант расчета предложенный в теории 9-го занятия показался слишком сложным. На примере 8-го занятия, если у Вас flex-basis: 50px, а размеры элементов нужно сделать 100px и 200px соответственно, то делаем следующее:

  1. От нужного размера элемента отнимаем его flex-basis:
  • для 1-го 100px - 50px = 50px;
  • для 2-го 200px - 50px = 150px;
  1. Соотношение вышеуказаных остатков и есть величины flex-grow, тоесть 50/150 = 1/3:
  • для 1-го элемента flex-grow = 1;
  • для 2-го элемента flex-grow = 3.
10 лайков