flex 简写详解

本文以主轴为横轴flex-direction:raw;进行解释，当主轴为纵轴flex-direction:column;时，请将本文宽度概念改为高度概念

• flex: flex-grow | flex-shrink | flex-basis;

flex-grow:空间有余（父级容器宽度 > 当前元素总宽度）时如何分配
flex-shrink:空间不足（父级容器宽度 < 当前元素总宽度）时如何分配
flex-basis:空间分配基准值

空间有余时 flex-shrink 无效，空间不足时 flex-grow 无效，这两个属性是针对两种不同场景的互斥属性。

值:

• 默认值: flex:0 1 auto;
• none: flex:0 1 auto;
• auto: flex: 1 1 auto;

一个值:

• 非负数字 x: flex: x 1 0%;
• 长度或百分比 y: flex: 1 1 y;

两个值:

• 非负数字 m n: flex: m n 0%;
• 非负数字 a 长度或百分比 b: flex: a 1 b;

flex-basis:
定义了在分配多余空间之前，项目占据着主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。

flex-basis 与 width 同时设置时，flex-basis 优先级更高。

• auto: 如果有 width 则为 width，否则根据内容，撑开宽度
• 0: 根据内容，撑开宽度