flex布局
中文译为弹性布局，可以为盒装模型提供最大的灵活性，任何一个容器都可以指定为弹性布局，是适配布局最常用的布局。
提前声明
当为父盒子设置flex布局后，子元素的float(浮动)，clear和vertical-align都会失效，当然，如果学会了flex布局，那浮动大概率就不需要了。
学习方向
弹性布局可以操作父项和子项，二者的操作方式有一些不同，但又有很多相似，需要分别学习。
父项
不论是对父项进行配置还是对子项进行配置，操作的对象都是子项，所以父项中必须要加上
display:flex;
- 父项的常见属性：
- flex-direction:可以操作排列的主轴方向，如果没写，那默认值为按横向排列（row）
纵向排列为column
- flex-wrap:可以操作排列时是否换行，默认为不换行（nowrap），换行为(warp)
- flex-flow:direction和wrap的结合
- justify-content:设置主轴上子元素的排列方式,如果主轴是x轴,那默认是从左向右顺序排列；如果主轴是y轴，那默认是从上往下顺序排列，中间没有间隔；
space-around是平分空间
space-between是先两边贴边，再平分剩余空间
- align-items（单行）：设置侧轴上子元素的排列方式。默认排列跟justify-content相同，其中center是居中
stretch是拉伸（前提是不设置子盒子高度）
- align-content（多行）:设置侧轴上子元素的排列方式。选项有space-around
space-betweeen
stretch
