一文搞懂 flex 属性

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