1. 分类
display: flex; 块级
display: inline-flex; 行级
给父元素设置
2. 排列方式
flex-direction: row; （默认值)从左排列
flex-direction: row-reverse; 从右排列
flex-direction: column; 从上排列
flex-direction: column-reverse ; 从下排列
给父元素设置
3. 换行
flex-wrap: wrap-reverse;换行, 从下往上排列
flex-wrap:nowrap; 不换行
flex-wrap:wrap; 换行
flex-wrap:flex;可以根据父元素宽度来改变子元素宽度，不想改变，设置换行
给父元素设置
4. 排列+换行
flex-flow: row nowrap; 从左排列不换行
flex-flow: <flex-direction> <flex-wrap>;
5. 子元素对齐方式
justify-content: space-between; 先两边对齐，然后等间距的分布在容器中
justify-content: space-around; 先居中对齐，然后等间距的分布在容器中
justify-content: space-evenly; 注重间距，先将所有间距等分，再排列
justify-content: center; 居中
justify-content: flex-end; 右对齐
justify-content: flex-start; 左对齐
6. 交叉轴上对齐
align-items: flex-start; 顶点对齐
align-items: flex-end; 底部对齐
align-items: baseline; 文字顶端对齐
align-items: center; 中点对齐
align-items: stretc; 如果项目未设置高度或设为auto，将占满整个容器的高度。
效果类似于vertical-align
给父元素设置
7. 子元素属性
7.1 order
定义子元素排列顺序，默认为0
数值越小，排列越靠前（数值可以为负）
order:5;
7.2 flex-grow
1）定义子元素放大倍数，默认为0
2）当所有子元素值为1，即使存在间隙，也不放大，而是等分间隙
3）若一个子元素为2，其他为1，则此子元素比其他元素多放大等分间隙后间隙宽度的一倍
7.3 flex-shrink
1）定义元素缩放比例，默认1
2）可根据父元素的宽度缩放
3）当值为0时，则不根据父元素的宽度改变而缩放
7.4 align-self
给指定元素设置不同的对齐方式
1）auto 继承父元素的对齐方式
2）stretch 元素被拉伸以适应父元素
3）flex-start 元素位于容器的开头
4）center 元素位于容器中间的位置
5）flex-end 元素位于容器的结尾
6）baseline 元素位于容器的基线上
