弹性盒模型

• display:flex 设置弹性盒模型

• flex-direction 设置主轴方向：

row                 从左向右排列(默认值)
row-reverse         从右向左排列
column              从上往下排列
column-reverse      从下往上排列

• justify-content 主轴对齐:

flex-start          (默认) 元素在开始位置 富裕空间占据另一侧
flex-end            富裕空间在开始位置 元素占据另一侧
center              元素居中 富裕空间 平分左右两侧
space-between       富裕空间在元素之间平均分配
space-around        富裕空间在元素两侧平均分配

• align-items 侧轴对齐:

flex-start          (默认) 元素在开始位置 富裕空间占据另一侧
flex-end            富裕空间在开始位置 元素占据另一侧
center              元素居中 富裕空间 平分左右两侧

• flex-wrap 换行:

nowrap               (默认)
wrap                 换行
wrap-reverse         反向换行

• align-content 堆栈伸缩行:

align-content         会更改 flex-wrap 的行为。它和 align-items 相似，但是不是对齐伸缩项目，它对齐的是伸缩行。
flex-start            (默认) 元素在开始位置 富裕空间占据另一侧
flex-end              富裕空间在开始位置 元素占据另一侧
center                元素居中 富裕空间 平分左右两侧
space-between         富裕空间在元素之间平均分配
space-around          富裕空间在元素两侧平均分配

• order 显示顺序(排序)
  范例

div:nth-of-type(1){
    order: 0;
}
div:nth-of-type(2){
    order: -5;
}
//-5 小于 0 最终输出结果是 小的在前面 大的在后面

• flex 伸缩性

flex: auto
flex: none
//范例：
div:nth-of-type(1){
    flex: 1;
}
div:nth-of-type(2){
    flex: 3;
}

• align-self 侧轴对齐

flex-start              (默认) 元素在开始位置 富裕空间占据另一侧
flex-end                富裕空间在开始位置 元素占据另一侧
center                  元素居中 富裕空间 平分左右两侧