1. flex布局
flex布局 全称：flexible box => 伸缩盒模型 或者也叫 弹性盒子
布局分为两种：
- 传统布局： display + float + position
- flex => 主要用于移动端
容器：开启了flex的元素
容器中的每一个成员叫做项目
- 给父盒子加上 display:flex； 子盒子就会在一行显示
- 设置主轴方向，默认是x轴: row;
默认：开启了flex布局的容器中的项目成员，会沿着x轴来进行排布，我们就将x轴称为主轴，而另外一边y轴，就叫做侧轴。
- flex-direction:row;
设置主轴方向为y轴，成员就会竖着排列 => 且从上往下
- flex-direction:column;
翻转
- flex-direction:row-reverse;
2. flex-wrap
flex-wrap 的意思是 是否换行
默认值是nowrap => 不换行
- 换行，如果父容器有足够的高度，则换行的元素会在剩余空中间垂直居中显示
- 如果父容器没有足够的高度，则子盒子会紧跟上行元素显示
- 如果超出尺寸，则子元素的尺寸会进行压缩
推荐写法
flex-wrap: nowrap;
flex-wrap:wrap ;
3. flex-flow
是一个复合属性，用于同时设置主轴方向和是否换行，对于顺序没有要求。
flex-flow: column-reverse wrap-reverse;
4. justify-content
justify-content定义了成员在主轴的对齐方式，默认是flex-start
用法：justify-content:flex-start;
- 整体往右对齐，不是翻转
justify-content:flex-end;
- 平分空间
justify-content:space-around;
- 两边固定，其余平分空间
justify-content:space-between;
- 水平居中
justify-content:center;
- 平分空间，两侧的空间和中间的空间一致
justify-content：space-evenly；
5. align-items
align-items是定义成员在侧轴上的对齐方式；默认是flex-start
注意：该方法只适用于成员只有一行的情况
用法: align-items: flex-start;
- 与侧轴的终点对齐
align-items: flex-end;
- 居中
align-items:center;
- 如果项目成员没有设置高度，使用该属性可以让成员的高度填满父容器
align-items：stretch;
6. align-content
对于多行成员来讲，align-content会将这些成员视为一个整体来对待并且可以设置在侧轴的对齐方式
推荐写法
- 从上往下：flex-start；
- 从下往上：flex-end；
- 居中: flex-center；
- 平分空间居中: space-around；
- 两侧贴紧： space-between；
- 平分容器，两边都一样宽：space-evenly；
7. order
order可以用来对单个成员的位置进行处理
order作用于子元素
语法: order：数字;
默认值都是0，取整数，含负数
取值越小，排名越靠前
取值越大，排名越靠后
8. flex-grow
flex-grow用于分配剩余空间，默认是0，不带单位
通常接收一个数字作为值，谁要剩余空间，就给谁加
在父盒子有剩余空间的时候才会生效
就算没有给子盒子设置宽高，也可以自动分配
9. align-self
align-self用于单独设置某一成员在侧轴的对齐方式
基本和align-items相同
不过，align-items是用于统一控制成员的对齐方式
但是，align-self是单独控制某一成员的对齐方式
该属性作用于单一子元素
