传统布局：兼容性好，布局繁琐，局限性，不能在移动端很好的布局
flex弹性布局：操作方便，布局极为简单，移动端应用很广泛
Pc端浏览器支持情况较差，ie11更低版本不支持或仅部分支持
常见父项属性（控制子元素，通过父亲来控制）
1.flex-direction：设置主轴（x轴）的方向【主轴和侧轴可以相互转换，就看该属性把哪个方向设置为主轴】(row [x轴默认]，row-reverse[翻转从右往左排列] ,column[主轴为y轴])
2.justify-content：设置主轴上的子元素排列方式（使用前确定哪个方向是主轴）默认从从左到右（flex-start），flex-end（从右到左排列），center（居中对齐）space-around（平均分配剩余空间），space-between（左右两个元素先两边贴边，在平分剩余空间）
3.flex-wrap：设置子元素是否换行（默认（nowrap）如果当一行摆不开时，会硬放到一行，吧其它（元素）盒子宽度变小）（设置wrap会进行换行）
4.align-content：设置侧轴（y轴垂直向下）上子元素的排列方式（适用于多行排列，在单行情况下无效），flex-start（默认值在侧轴及y轴的头部开始排列），flex-end（在侧轴的尾部开始排列），center（在侧轴居中显示），space-around（子项在侧轴平均分配剩余空间），space-between（子元素在侧轴先分布在两头，在平均分配剩余空间），stretch（设置子元素高度平均分父元素高度）。
5.align-items：设置侧轴上的子元素排列方式（适用于单行排列） center（垂直居中），flex-start垂直居上，stretch（沿着y轴拉伸，但是子元素不要给高度）
6.flex-flow;复合属性，相当于同时设置了flex-direction和flex-wrap（flex-flow：row wrap）
常见子元素属性
flex:number > (定义子元素(分配剩余空间)，用flex来表示占多份，0占0份，1占1份…)
{案例圣杯布局}==> 左侧固定，右侧固定，中间自适应（及左右给定固定宽高，中间元素设置flex:1）.
假如有一个父元素，三个子元素，flex:1 不给子元素设置宽度，3个子元素会平均分配父元素的剩余空间。如果第二个子元素的所占空间想变大，就给他设置
flex:2(或者更大)。
align-self：> 这样可以控制某一个子元素（子元素自己控制自己）。
order：> 控制模块排列顺序，数字越小，排序越靠前，默认为0，所以可以给盒子order设置负值，把模块放到前面，或者把设置比0大的数把模块放到后面。