设置给flex盒子的6点属性，分别为
1、flex-wrap: nowrap;（指定项目是否换行）
2、flex-direction: row;（决定主轴方向）
3、flex-flow: nowrap row;（为前两者的缩写）
4、justify-content: flex-start;（项目在主轴上的排列方式）
5、align-items: stretch;（项目在交叉轴上的排列方式）
6、align-content:stretch;（多行时，多跟轴线和交叉轴的对齐方式）
1、flex-wrap 指定项目是否换行
flex-wrap: nowrap | wrap | wrap-reverse
指定项目是否换行
nowrap 不换行 默认值
wrap 换行 正序排列
wrap-reverse 换行 行倒序排列
2、flex-direction 决定主轴的方向
flex-direction: row | row-reverse | column | column-reverse
决定主轴方向(项目的排列方向)
row : 默认水平方向(从左到右)
row-reverse : 水平方向(从右往左)
column : 垂直方向(从上到下)
column-reverse : 垂直方向(从上到下)
3、flex-flow 前两者的缩写
flex-flow: flex-wrap flex-direction
4、justify-content 决定项目在主轴上的对齐方式
/*justify-content: center | flex-end | flex-start | space-around |space-between
决定项目在主轴上的对齐方式(一下内容以从左到右为例)
flex-start : 沿左侧对齐
center : 沿中间对齐
flex-end : 沿右侧对齐
space-around : 均匀分布 (项目两侧留白相等)
space-between : 项目靠两侧对齐*/
5、aline-items 决定项目在交叉轴上的对齐方式
/*align-items: flex-start | flex-end | center | stretch | baseline
决定项目沿交叉的对齐方式(以默认从上到下为例)
flex-start : 沿上方对齐
center : 沿中间对齐
flex-end : 沿下方对齐
baseline : 沿文字基线对齐
stretch : 默认值 填满整个交叉轴空间*/
6、aline-content 多行时，决定多跟轴线跟交叉轴的对齐方式
/*align-content: flex-start | center | flex-end | space-between | space-around | stretch
决定多跟轴线沿交叉轴的对齐方式(只有换行产出多跟轴线时才有效)
flex-start : 沿交叉轴起点对齐
flex-end : 沿交叉轴结束点对齐
center : 沿交叉轴终点对齐
space-between : 沿交叉轴两侧对齐
space-around : 沿交叉轴均匀分布
stretch : 填满整个交叉轴 默认值*/
#-------------------------------------------------------------------
下面是给项目自身设置的6点属性。
1、**flex-grow: : [number] 决定项目放大比率 (填满主轴剩余空间)**
number : 数值 默认为0 不自动放大,值越大 , 放大比率越大。
2、**flex-shrink: [number] 决定项目缩小的比例(shrink-->收缩)**
number : 数值 默认为1 自动缩小 0 不缩小,值越大缩小比率越大。
3、**flex-basis: auto | pixel | percent （决定项目放大缩小的基准值）**
auto : 使用项目本身大小
pixel : 使用指定像素值
percent : 使用指定的百分比
100% 当 wrap 时,项目会占容器的整个宽度
当 nowrap 时,项目会占容器主轴剩余的宽度(其他放大无效)
4、**flex: 1 1 100%;（以上三个的简写）**
5、**align-self: flex-start | flex-end | center | stretch | baseline** (第一个项目的文字基线)：**决定项目自身的对齐方式(相对于交叉轴)**
6、**order: [number] 决定项目的顺序**
默认为0，越小越靠前，可以接收负值
