css flex布局概要（两个表格快速掌握）

flex布局原理

采用flex布局的元素，称为flex容器。它的所有子元素自动成为容器成员，称为flex项目。
flex布局就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。
（这句话很重要，注意理解，实际应用用得上）

常见父项属性

属性	属性值	作用
flex-direction	row/row-reverse/column/column-reverse	设置主轴的方向
flex-wrap	nowarp/warp	设置子元素是否换行
flex-flow	略	是flex-direction和flex-wrap的简写属性
justify-content	flex-start/flex-end/center/space-around/space-between	设置主轴上的子元素排列方式
align-items	flex-start/flex-end/center/stretch/baseline	设置侧轴上的子元素排列方式（单行）
align-content	flex-start/flex-end/center/stretch/space-around/space-between	设置侧轴上的子元素排列方式（多行）

注意：多行的意思是“换行”形成的多行

常见子项属性

属性	属性值	作用
flet	(数字，如1,2,3)	定义子项目分配剩余空间，用flex来表示占多少份数
align-self	flex-start/flex-end/center/stretch/baseline	控制子项自己在侧轴上的排列方式
order	(数字，如1，2,3)	定义项目的排列顺序。数字越小排列越靠前，默认为0