CSS3 flex弹性布局总结归纳

相关术语

容器：包裹项目的标签，也是flex布局的空间
项目：容器里的直接子元素，flex布局就是对项目的排列

主轴：表示项目排列的方向，默认是x轴，即水平方向。项目永远排列在主轴的正方向
侧轴：默认是y轴，表示项目在垂直方向的排列

富裕空间管理： 表示当容器中存在富裕空间时，项目应该如何摆放
弹性空间管理：表示当容器中存在富裕空间时，项目该如何充满空间

属性解析

容器属性

display: flex; 将标签声明为弹性盒子
flex-direction: row|row-reverse|column|column-reverse; 声明主轴的方向
justify-content: flex-start|flex-end|center|space-between|space-around; 声明主轴方向存在富裕空间时，项目如何摆放
align-items: flex-start|flex-end|center|baseline|stretch; 声明侧轴方向存在富裕空间时，项目如何摆放
flex-wrap: nowrap|wrap|wrap-reverse; 声明项目如何换行，换行的方向
align-content: ;多行/列时侧轴富裕空间的管理
flex-flow: flex-direction和flex-wrap的简写属性

项目属性

order: 项目摆放时的顺序级别，越小排名越靠前
align-self: 项目自己在侧轴上的富裕空间管理
flex-basis: px|%|auto; 声明项目在主轴上的基准值
flex-grow: 弹性因子; 声明弹性空间管理时项目放大的权重

最终长度计算为： 基准值 + 富裕空间 / 所有项目的flex-grow之和 * 本项目flex-grow权重

flex-shrink: 收缩因子; 声明弹性空间管理时项目收缩比例

1. 计算收缩因子与基准值乘积的总和
2. 计算收缩因数
   收缩因数 = (项目的收缩因子*项目基准值)/第一步计算总和
3. 移除空间的计算
   移除空间 = 项目收缩因数 * 负溢出的空间