由于浮动具有破坏性，所以就有一个新的布局方案，叫flex布局。（替代浮动）
四大概念： 容器，项目，主轴，交叉轴
- 容器：如果在一个盒子上面，设置display:flex，那么这个盒子就是一个容器
- 项目：容器的直接子元素，叫项目
- 主轴：在容器中，项目默认是按主轴方向排列，默认是从左向右排列
- 交叉轴：与主轴垂直的那个轴
- flex-direction：改变主轴方向 row column row-reverse column-reverse
- flex-wrap:项目足够多的时候，是否换行 wrap nowrap
- * flex-flow:flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
- justify-content:处理富余空间 flex-start flex-end center space-between space-around
- align-items: 定义项目在交叉轴上如何对齐 flex-start flex-end center
- align-content : 当有多根主轴时，多根主轴的对齐方式。相当于处理垂直方向上的富余空间。
项目相关的属性：
- order：是用来改变项目的顺序的
- lex-grow：让某个项目生长
- flex-shrink：让某个项目压缩
- flex-basis：项目在主轴上占据的大小
- flex：上面几个属性的简写方式
- align-self：单独设置某个项目的对齐方式,单独一个项目在交叉轴的对齐方式
