一文搞懂 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
  所以实际 fle