flex相关属性的计算方法

[metroluffy]

flex属性的计算方法

这里主要是flex-grow、flex-shrink，分别对应在空间有剩余时的分配、空间不足时的收缩

flex-grow

剩余空间按flex-grow指定的值比例分配即可

举个例子，父容器的宽度为600，两个子项A(300, 1)、B(200, 2)，求具体宽度：

剩余宽度为100

子项增长宽度A = 100 * 1/3 = 33.333, 则实际宽度 = 333.333
子项增长宽度B = 100 * 2/3 = 66.667, 则实际宽度 = 266.667

Demo

flex-shrink

子项收缩宽度 = 子项收缩比例 *溢出宽度
子项收缩比例 = (子项宽度* 收缩系数) / 所有子项的(宽度  *收缩系数)之和

* 收缩系数指flex-shrink的值

举个例子，父容器的宽度为600，两个子项A(500, 2)、B(400, 1)，求具体宽度：

溢出宽度为300

子项收缩比例A = (500 *2) / (500 × 2 + 400 × 1) ≈ 0.71
子项收缩比例B = (400* 1) / (500 × 2 + 400 × 1) ≈ 0.29

子项收缩宽度A = 300 * 0.71 = 213, 则实际宽度 = 287
子项收缩宽度B = 300 * 0.29 = 87, 则实际宽度 = 313

* 实际宽度略有出入，与收缩比例取整有关

关键在于收缩比例的计算，和flex-grow不一样

Demo