1. flex 属性简介
flex-grow
：扩展子元素长度
flex-shrink
：收缩子元素长度
flex-basic
：设置子元素长度
flex-grow
和
flex-shrink
属性是基于父元素的长度进行计算的
flex-basic
实际上就是给子元素设定默认值，可以理解为直接他宽高设定默认值
建议概念比较模糊的同学先不要合起来使用
flex
属性，如
flex: 0 1 auto
因为拆分用对每个属性的用途会更加清晰
2. flex-grow 扩展比，默认值为0
扩展长度公式
= (
父元素长度
–
所有子元素长度
) /
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 扩展比，默认值为0
收缩长度公式
= 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扩展比，默认值为0
-
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
文中的代码地址：https://codepen.io/davidwong9785/pen/KKpqRoo
本文参考自：https://zhuanlan.zhihu.com/p/50449041