特点
传统布局：兼容性好，布局繁琐，局限性在移动端不能很好布局 ，
Flex布局：简单，操作方便，兼容性差 ，
Pc采用传统布局，移动端或者不考虑兼容的pc可采用flex布局。
FLEX 布局原理
flex的布局原理就是：给父盒子添加flex属性，来控制紫盒子的排列方式来实现flex布局。
当父盒子设置flex属性的时候，子元素的float、clear和vertical-alin属性将失效。
FLEX布局又叫伸缩性布局，弹性布局，伸缩盒布局、弹性盒布局。
常见属性
主轴（flex-direction）
FLEX默认的主轴是row，x轴
改变主轴方向可以设置 flex-direction来改变
direction:column;将主轴改为y轴，纵轴
direction:row; 将主轴改为x轴，横轴 (默认)
direction:row-reverse;主轴为x轴，并且翻转
direction:column-reverse;主轴为y轴，并且翻转主轴排列方式(justiy-content)
justify-content： ;能够设置主轴子元素的排列形式
start;所有子元素在主轴头部显示
end;所有子元素在主轴尾部显示
center; 所有子元素在主轴居中对齐
around;所有子元素平分剩余空间
between ;所有子元素先两边再平分剩余空间
开启flex布局后默认不换行
如想设置换行
flex:wrap
Flex-flow就是flex-direction和flex-wrap的合写副轴(align-items)
利用align-items能够设置侧轴元素对齐的方式（单行）的时候使用。
start ；表示从头开始
end ;表示从结尾开始
center ; 表示居中显示
stretch ;将子元素拉伸
多行使用 align-content单个盒子设置
设置单个盒子的样式
align-self：设置单个盒子的优先顺序
oder:0 //注意，是排列优先，而不是像z-index遮盖
o是默认值，
优先就改为负数
