写在前面
本文只列出 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
参考文献
-
Flex 布局教程：语法篇
作者：阮一峰 -
Flex 布局教程：实例篇
作者：阮一峰 -
采用 20/80 原则学习 CSS Grid 布局 (译)
作者：一歩