1. flex 属性简介
flex-grow：扩展子元素长度
flex-shrink：收缩子元素长度
flex-basic：设置子元素长度
flex-grow 和 flex-shrink 属性是基于父元素的长度进行计算的
flex-basic 实际上就是给子元素设定默认值，可以理解为直接他宽高设定默认值
建议概念比较模糊的同学先不要合起来使用 flex 属性，如 flex: 0 1 auto
因为拆分用对每个属性的用途会更加清晰
2. flex-grow 扩展比
扩展长度公式 = ( 父元素长度 - 所有子元素长度 ) / flex-grow 比值总数 * flex-grow
容器宽度为 800px，子元素 width 为 150px，一个有 4 个
- 例子1：
当flex-grow比为 1 : 1 : 1 : 1 时
扩展长度 = ( 800 - 600 ) / 4 * 1 = 50
所以实际 flex子元素 宽度为 200px
- 例子2：
当flex-grow比为 1 : 2 : 3 : 4 时，flex-grow比值总数 = 1+2+3+4 = 10
扩展长度1 = ( 800 - 600 ) / 10 * 1 = 20
扩展长度2 = ( 800 - 600 ) / 10 * 2 = 40
扩展长度3 = ( 800 - 600 ) / 10 * 3 = 60
扩展长度4 = ( 800 - 600 ) / 10 * 4 = 80
所以实际 flex子元素 宽度为
150 + 20 = 170
150 + 40 = 190
150 + 60 = 210
150 + 80 = 230
3. flex-shrink 收缩比
收缩长度公式 = abs( 父元素长度 - 所有子元素长度 ) / flex-shrink 比值总数 * flex-shrink
容器宽度为 800px，子元素 width 为 300px，一个有 4 个
-
例子1：
当flex-shrink比为 1 : 1 : 1 : 1 时
收缩长度 = abs( 800 - 1200 ) / 4 * 1 = 100
所以实际 flex子元素 宽度为 200px
-
例子2：
当flex-shrink比为 1 : 2 : 3 : 4 时，flex-shrink比值总数 = 1+2+3+4 = 10
扩展长度1 = abs( 800 - 1200 ) / 10 * 1 = 20
扩展长度2 = abs( 800 - 1200 ) / 10 * 2 = 40
扩展长度3 = abs( 800 - 1200 ) / 10 * 3 = 60
扩展长度4 = abs( 800 - 1200 ) / 10 * 4 = 80
所以实际 flex子元素 宽度为
300 - 40 = 260
300 - 80 = 220
300 - 120 = 180
300 - 160 = 140
-
例子3：
当某一子元素flex-shrink比值过于大时，如1:2:3:18该子元素计算得出 宽度 将趋近于0，flex布局就会按照该元素内容的宽度大小来设置其宽度，同时这个宽度也会影响到其他的 flex子元素
假设这个flex-shrink为18的 flex子元素 内容宽度为18px
300 - ( 800 - 1200 ) / 24 * 1 - 18 / ( 1 + 2 + 3 ) * 1 = 280.34
300 - ( 800 - 1200 ) / 24 * 2 - 18 / ( 1 + 2 + 3 ) * 2 = 260.66
300 - ( 800 - 1200 ) / 24 * 3 - 18 / ( 1 + 2 + 3 ) * 3 = 241
4. flex-basic 默认长度
flex-basic值为auto时，按照 子元素 宽度来计算：
下面例子的第一个子元素内容为空，宽度没有设置，所以没有展示
- 子元素设置了
flex-basic值，同时也设置了子元素width，则按flex-basic值 计算：
下面例子flex-basic为150px，width为160px，最终展示时150
- 设置了
flex-grow或flex-shrink，flex子元素实际宽度不会直接按flex-basic展示，会根据伸缩比计算再分配相应宽度：
下面例子flex-basic为150px，flex-grow为1，最终展示是经过扩展的
- 如 flex子元素 设置了
min-width或max-width，当flex-basic值小于min-width则按照min-width值设置 flex子元素 宽度，同理min-width亦然：
下面例子第一个子元素min-width为180px，其他子元素flex-basic为150px
max-width为50px，其他子元素flex-basic为150px，flex-grow为1
文中的代码地址：codepen.io/davidwong97…
