HTML--flex弹性布局

1.各父项属性布局

（1）flex-direction：设置二维坐标轴中，x轴的方向的排列

• flex-direction：row (默认，从左到右)
• flex-direction：row-reverse（从右到左）
• flex-direction：column（从上到下）
• flex-direction：column-reverse（从下到上）：

（2）justify-content：设置X轴上子元素排列方式

• justify-content：flex-start （默认从第一个开始，如果主轴是x轴，从左到右）
• justify-content：flex-end（从尾部开始排列）
• justify-content：center（居中）
• justify-content：space-around（如果一行空间足够的话，每一个子盒子占据一个小地方，每个子盒子之间有空格）
• justify-content：space-between（最两侧的子盒子先贴边，然后平分剩余空间，如果空间不够，则为一行）
• space-between：

（3）flex-wrap：子盒子是否换行（在一行空间不足的情况下）

• flex-wrap：wrap（换行）
• flex-wrap：nowrap（不换行）

（4）align-items：设置Y轴上的子盒子排列方式（单行）

• align-items：flex-start（默认值，从上倒下）
• align-items：flex-end（从下到上）
• align-items：center（垂直居中）
• align-items：stretch（拉伸）
• 居中：
• 

 （5）align-content：设置Y轴上的子盒子排列方式（多行,在单行下没有效果）

align-content：flex-start（默认，从侧轴的头部开始排列）

align-content：flex-end（从侧轴的尾部开始排列）

align-content：center（从侧轴的中间开始显示）

align-content：space-around（从侧轴平分空间）

align-content：space-between（先贴边，然后平分空间）

align-content：stretch（子元素平分父元素高度，划为等份）：

    (6）flex-flow：是flex-direction和flex-wrap属性的复合属性。

• flex-flow:row wrap;主轴排列方向和换行。