启用flex
display:flex;
设置flex位置
flex-disrection属性：
- row-reverse 行元素反转
- column-reverse 列元素反转
- row 元素都排列在同一行（默认）
- column 元素都排列在同一列
设置行对齐方式
justify-content属性：
*center 水平居中对齐
- flex-start 左对齐（默认）
- flex-end 右对齐
- space-between 两端对齐（中间可能会有空缺）
- space-around 中间分开两半然后分别居中对齐
- sparce-evenly 平均分配中间
设置列对齐方式
align-items属性：
- center 垂直居中对齐
- flex-start 顶部对齐
- flex-end 底部对齐
- stretch 拉伸填充（默认）
- basseline 将项目与其基准对齐。基线是一个文本概念，可将其视为字母所在的行。
包装项目
flex-wrap属性：
- nowrap 不包装项目(默认)
- wrap 从左到右包装
- wrap-reverse 从右到左包装
缩小项目
flex-shrink属性：flex-shrink值为1，而另一个项目的flex-shrink值为3，则值为的项目3将缩小为另一个项目的3倍
放大项目
flex-grow属性：flex-grow值为1，而另一个项目的flex-grow值为3，则值为的项目3将放大为另一个项目的3倍
设置初始大小：
flex-basis属性：指定flex-shrink或flex-grow的初始大小。
flex-basis:20em;
快速设置flex属性
flex属性：
flex:1 1 150px;
参数位置关系
flex:flex-grow flew-shrink flex-basis;
flex排序
order属性：order小的值会排在order值大的前面，可以使用负数
单独设置flex的列对齐
align-self属性：align-self接受与align-items该align-items属性相同的值，并将覆盖该属性设置的任何值