写在前面
本文只列出flex及grid布局的一些基本概念及新增属性，用于自检对相关知识的掌握程度。
具体教程及实例还请参考文末的引用文献。
Flex布局
概念
- flex容器 （flex container）
- flex项目 （flex item）
主轴 （main axis）
- 主轴位置 （main start、main end）
- 主轴空间 （main size）
交叉轴 （cross axis）
- 交叉轴位置 （cross start、cross end）
- 交叉轴空间 （cross size）
属性
容器属性
flex-direction
- row
- row-reverse
- column
- column-reverse
flex-wrap
- nowrap
- wrap
- wrap-reverse
flex-flow
- 双参数：flex-direction, flex-wrap
justify-content
- flex-start
- flex-end
- center
- space-between
- space-around
align-items
- flex-start
- flex-end
- center
- baseline
- stretch
align-content (发生wrap时才生效)
- flex-start
- flex-end
- center
- stretch
- space-between
- space-around
项目属性
order
- 缺省：0
flex-grow
- 缺省：0
flex-shrink
- 缺省：1
flex-basis
- 缺省：auto
flex
- 三参数：flex-grow, flex-shrink, flex-basis
align-self
- auto
- flex-start
- flex-end
- center
- baseline
- stretch
Tips：
item的flex三个参数最好写全，事实上：
-
flex: 0 1 auto≠flex: 0 1
不过常见有写：flex: 1
意思是：若存在剩余空间时，该item填充满；
但若是空间已经不够用了（超出父容器），同样有： -
flex: 1≠flex: 1 1 auto
虽然flex参数2和参数3的缺省值是：1 auto
-
item的flex属性：
缺省值：0 1 auto
- 参数1：0代表不扩展，非0代表参与比例运算扩展
- 参数2：0代表不压缩，非0代表参与比例运算压缩
- 参数3：auto代表默认大小，常用的还有百分比（相对于父元素）和固定大小；
- flex-grow：父容器存在剩余空间时生效；
- flex-shrink：超出父容器总空间时生效；
- flex-basis：分配剩余空间之前的预处理；
Grid布局
概念
- grid容器
- grid网格线
- grid单元
- grid区域
- grid轨道
属性
容器属性
- grid-template-rows
- grid-template-columns
- grid-template-ares
区域属性
- grid-area
参考文献
