flex布局简介
flex布局，简称“弹性布局”，为盒子布局实现了最大的灵活性
2009年,w3c提出一种新型布局方式，可以简便、完整、响应式地实现各种页面布局。
该布局将成为未来布局的首选方案
flex布局的浏览器兼容
容器属性
flex-direction:主轴排列方向
[row]（:默认）左右排列，从左开始
[row-reverse]:左右排列，从右开始
[column]:上下排列，从上开始
[column-reverse]:上下排列，从下开始
flex-wrap:一行溢出排列方式
[nowrap]（默认）:溢出后不换行，按宽度比例显示
[wrap]:溢出后换行显示，显示样式跟随 [align-content]
[wrap-reverse]:溢出后换行，第一行在上面
flex-flow:主轴排列方向 || 一行溢出排列方式（将两个缩写）
[row wrap](默认)
justify-content：项目主轴上的对齐方式
[flex-start] (默认):从左向右
[flex-end]:从右向左
[center ]:中间对齐
[space-between]:中间开花,两边靠边
[space-around]:中间开花，其余间距平均分
align-items：box在交叉轴的对齐方式
[stretch](默认):如果项目未设置高度或设为auto，将占满整个容器的高度
[flex-start]:交叉起点对齐
[flex-end]:交叉终点对齐
[center]:交叉中间对齐
[baseline]:拉伸盒子
项目属性
order:定义项目的排列顺序,数值越小，排列越靠前，默认为0。
.item {
order: <integer>;
}
flex-grow:定义box的放大比例
0（默认）:不放大
其他：根据同行的box元素比例放大
flex-shrink：定义box的放大比例
1（默认）：缩小
其他：定义box的缩小比例
flex-basis: box占主轴空间，根据这个属性计算剩余空间
auto(默认)：空间不够会压缩
其他：跟着定义走
flex:flex-grow flex-shrink flex-basis;
0 0 none :不放大 不缩小 不跟着剩余空间改变
1 1 auto :放大 缩小 跟着剩余空间改变
align-self：允许某一个跟其他对齐方式不一样
