flex布局(学习笔记)
flex 是 flexible Box 的缩写，弹性布局。当我们为父盒子设为 flex 布局以后，子元素的 float、 vertical-align 属性将会失效。
flex布局父级常用的属性：
- flex-direction：设置主轴的方向
- flex-wrap：设置子元素是否换行
- flex-flow：可以同时设置flex-direction、flex-wrap属性
- justify-content：设置主轴上的子元素排列方式
- align-content：设置侧轴上的子元素的排列方式（多行使用）
- align-items：设置侧轴上的子元素排列方式（单行使用）
flex-direction设置主轴的方向
在 flex 布局中，是分为主轴和侧轴两个方向，默认主轴方向就是 x 轴方向，水平向右，默认侧轴方向就是 y 轴方向，水平向下。
flex-direction：row(默认值从左到右)，row-reverse(从右到左)，column(从上到下)，column-reverse(从下到上)。
flex-wrap设置是否换行
flex布局中默认是不换行的。nowrap (默认)不换行，wrap 换行。
flex-flow：可以同时设置flex-direction、flex-wrap属性
flex-flow:row wrap;
justify-content：设置主轴上的子元素排列方式
flex-strat:默认值从头部开始如果主轴是x轴，则从左到右
flex-end:从尾部开始排列
center:在主轴居中对齐(如果主轴是x轴则水平居中)
space - around:平分剩余空间
space-between:先两边贴边再平分剩余空间
align-content：设置侧轴上的子元素的排列方式（多行使用，单行没有效果）
flex-strat:默认值从头部开始如果主轴是x轴，则从左到右
flex-end:从尾部开始排列
center:在主轴居中对齐(如果主轴是x轴则水平居中)
space - around:平分剩余空间
space-between:先两边贴边再平分剩余空间
stretch:设置子项元素高度平分父元素高度
align-items：设置侧轴上的子元素排列方式（单行使用）
flex-start:从头部开始
flex-end:从尾部开始
center:居中显示
stretch:拉伸
flex布局子级常用属性（在子级元素设置）
flex:子级元素占的份数
order:属性定义子元素的排列顺序（前后顺序）
flex：子级元素占的份数
flex 属性定义子项目分配剩余空间，用flex来表示占多少份数。
.son { flex: num; /* 默认值 0 */ }
order：属性定义子元素的排列顺序（前后顺序）
数值越小，排列越靠前，默认为0。注意：和 z-index 不一样的。
.son { order: num; }