容器的属性
flex-direction：定义主轴方向
row：主轴为水平方向，起点在左端
row-reverse：主轴为水平方向，起点在右端
column：主轴为垂直方向，起点在上方
column-reverse：主轴为垂直方向，起点在下方
flex-wrap：是否换行
nowrap：（默认）不换行
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方
flex-flow：简写形式<br>
<flex-direction> || <flex-wrap> 的简写(可以省略，顺序任意 )<br>例：flex-flow: row wrap; // 定义主轴为水平方向，并且换行
justify-content：在主轴方向上的对齐方式
flex-start（默认值）：与main start对齐
flex-end：与main end对齐
center：居中对齐
space-between：两端对齐
space-evenly：等分对齐
space-around：等分对齐（两端间隔为中间间隔的一半）
align-items：在交叉轴上的对齐方式
stretch（默认值）：项目未设置高度情况下会占满整个容器
flex-start：与 cross start 对齐 <br>
flex-end：与 cross end 对齐 <br>
center：居中对齐 <br>
baseline：与项目第一行文字的基线对齐
align-content：决定多行flex items在交叉轴上的对齐方式<br> （用法与justify-content类似）
stretch（默认值）：与 align-items 的 stretch 类似
flex-start：与 cross start 对齐
flex-end：与 cross end 对齐
center：居中对齐
space-between
space-evenly
space-around
项目的属性
order：排列顺序，默认值为0
<number>：数值越小越靠前
flex-grow：放大比例，默认值为0
<number>：定义项目的放大比例
flex-shrink：缩小比例，默认值为1
<number>：定义项目的缩小比例，为0是不缩小
flex-basis：分配多余空间之前，项目占据的主轴空间
<length>：数值定义项目占用主轴的宽度
auto（默认值）：项目的本来大小
align-self：定义单个项目与其它项目不一样的对齐方式
flex-start：与 cross start 对齐 <br>
flex-end：与 cross end 对齐
center：居中对齐
baseline：与项目第一行文字的基线对齐
strech（默认值）:项目未设置高度情况下回占满整个容器
flex：简写形式<br><flex-grow> ||<flex-shrink>||<flex-basis>
单值语法
值必须为以下其中之一:<br> □ 一个无单位数(<number>): 它会被当作<flex-grow>的值。<br> □ 一个有效的宽度(width)值: 它会被当作 <flex-basis>的值。<br> □ 关键字none，auto或initial. <br>
双值语法
第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。<br>第二个值必须为以下之一：<br> □ 一个无单位数：它会被当作 <flex-shrink> 的值。<br> □ 一个有效的宽度值: 它会被当作 <flex-basis> 的值。 <br>
三值语法：
□ 第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。<br>□ 第二个值必须为一个无单位数，并且它会被当作 <flex-shrink> 的值。<br>□ 第三个值必须为一个有效的宽度值， 并且它会被当作 <flex-basis> 的值。 <br>
