为了避免由于浮动效果产生的破坏性，我们还可以使用flex布局
flex布局的四大概念：容器，项目，主轴，交叉轴
- 容器
flex布局元素称为Flex容器,简称容器。
- 主轴、交叉轴
容器分为两根轴：主轴和与之垂直的交叉轴。轴开始和结束分别以轴名+start或end标识。
- 项目
- 容器的所有子元素自动称为容器成员,称为Flex项目,又叫项目。
- 项目默认沿着主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉空间叫做cross size。
- 容器相关的属性：
- flex-direction：改变主轴方向
- flex-wrap:项目足够多的时候，是否换行
- flex-flow:flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
- justify-content:处理富余空间
- align-items: 定义项目在交叉轴上如何对齐
- align-content : 当有多根主轴时，多根主轴的对齐方式。相当于处理垂直方向上的富余空间。
- 项目相关的属性：
- order：是用来改变项目的顺序的
- flex-grow：让某个项目生长
- flex-shrink：让某个项目压缩
- flex-basis：项目在主轴上占据的大小
- flex：上面几个属性的简写方式
- align-self：单独设置某个项目的对齐方式,单独一个项目在交叉轴的对齐方式
