/*
设置display:flex;开启
(1):flex-direction: //设置主轴反向 默认横向从左到右
flex-direction: row(表示从左向右排列) | row-reverse(表示从右向左排列) | column(表示从上向下排
列) | column-reverse(表示从下向上排列);
(2):flex-wrap: //是否换行 默认否
flex-wrap: nowrap(不换行 | wrap(换行按从上到下的顺序) | wrap-reverse(换行按从下到上的顺序);
(3):flex-flow: //是flex-direction加flex-wrap的简写
flex-flow: row|| wrap
(4):justify-content: // 设置主轴的对齐方式
justify-content: flex-start(从启点线开始顺序排列) | flex-end(从终点线开始顺序排列)
| center(从中间开始顺序排列) | space-between(项目均匀分布，第一项在启点线，最后一项在终点线)
| space-around(项目均匀分布，每一个项目两侧有相同的留白空间，相邻项目之间的距离是两个项目之间留白的和)
| space-evenly(项目均匀分布，所有项目之间及项目与边框之间距离相等);
(5):align-items: //设置交叉轴的对齐方式
align-items: stretch(交叉轴方向拉伸显示) |
flex-start(项目按交叉轴起点线对齐) |
flex-end(项目按交叉轴终点线对齐) |
center(交叉轴方向项目中间对齐) |
baseline(交叉轴方向按第一行文字基线对齐);
(6)align-content 属性定义了在交叉轴方向的对齐方式及额外空间分配，类似于主轴上`justify-content`的作用。
(7):flex-order: 1 //排序小的往前
(8):flex-grow: 1 // 放大比例 1为沾满
(9):flex-shrink: 0 // 缩放比例 0为不允许缩放
(10):flex-basis: `flex-basis`属性定义项目在分配额外空间之前的缺省尺寸。
属性值可以是长度（20%，10rem等）或者关键字`auto`。它的默认值为auto，即项目的本来大小。
(11):flex: flex-grow, flex-shrink, flex-basis的简写，默认值为0 1 auto。后两个是可选属性。
*/
