弹性盒模型
display:flex 设置弹性盒模型
flex-direction 设置主轴方向：
row 从左向右排列(默认值)
row-reverse 从右向左排列
column 从上往下排列
column-reverse 从下往上排列
flex-start (默认) 元素在开始位置 富裕空间占据另一侧
flex-end 富裕空间在开始位置 元素占据另一侧
center 元素居中 富裕空间 平分左右两侧
space-between 富裕空间在元素之间平均分配
space-around 富裕空间在元素两侧平均分配
flex-start (默认) 元素在开始位置 富裕空间占据另一侧
flex-end 富裕空间在开始位置 元素占据另一侧
center 元素居中 富裕空间 平分左右两侧
nowrap (默认)
wrap 换行
wrap-reverse 反向换行
align-content 会更改 flex-wrap 的行为。它和 align-items 相似，但是不是对齐伸缩项目，它对齐的是伸缩行。
flex-start (默认) 元素在开始位置 富裕空间占据另一侧
flex-end 富裕空间在开始位置 元素占据另一侧
center 元素居中 富裕空间 平分左右两侧
space-between 富裕空间在元素之间平均分配
space-around 富裕空间在元素两侧平均分配
div:nth-of-type(1){
order: 0;
}
div:nth-of-type(2){
order: -5;
}
//-5 小于 0 最终输出结果是 小的在前面 大的在后面
flex: auto
flex: none
//范例：
div:nth-of-type(1){
flex: 1;
}
div:nth-of-type(2){
flex: 3;
}
flex-start (默认) 元素在开始位置 富裕空间占据另一侧
flex-end 富裕空间在开始位置 元素占据另一侧
center 元素居中 富裕空间 平分左右两侧
