flex弹性布局

flex 弹性布局，用来为盒装模型提供最大的灵活性，任何一个容器都可以制定为flex布局
当我们为父盒子设为flex布局后，子元素的float，clear和verical-align属性都将会失效
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
采用Flex布局的元素，称为Flex容器，简称'容器'，它的所有子元素自动成为容器成员，称为flex项目
div就是容器
span就是项目
子容器可以横向排列也可以纵向排列

常见父项属性
flex-direction 设置主轴的方向
row 默认从左到右
row-reserver 从右到左
column 从上到下
column-reserver 从下到上

justify-content:设置主轴上的子元素排列方式
flex-start 默认值从头部开始，如果主轴是X轴，则从左到右
flex-end 从尾部开始排列
center 在主轴居中对其（如果主轴是X轴则水平居中）
space-around 平分剩余空间
space-between 先两边贴边 再平分剩余空间（重要）
space-evenly 均分排列

flex-wrap：设置子元素是否换行
默认是no
warp 就能换行

align-content:设置侧轴上的子元素的排列方式（多行）
flex-start 默认值 从上到下
flex-end 从下到上
center 垂直居中
stretch 拉伸
space-around 子项在侧轴平分剩余空间
space-between 子项在侧轴先分布在两头，再平分剩余空间

align-items：设置侧轴上的子元素排列方式（单行）
flex-start 默认值 从上到下
flex-end 从下到上
center 垂直居中
stretch 拉伸

flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap

常见子项布局
flex 子项目占有的份数
flex属性定义子项目分配剩余空间，用flex来表示占多少份数

align-self 控制子项自己在侧轴的排列方式
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等于stretch

order属性定义子项的排列顺序（前后顺序）
order:1