flex父级常见属性

flex-direction 设置主轴的方向

属性值：
1、row 默认从左到右
2、row-reverse 默认从右到左
3、column 从上到下
4、column-reverse 从下到上

justify-content 设置主轴上的子元素排列方式

属性值：
1、flex-start 默认值 从头部开始 如果主轴是x轴，则从左到右
2、flex-end 从尾部开始排列
3、center 在主轴居中对齐（如果主轴是X轴则水平居中）
4、space-around 平均剩余空间
5、space-between 先两边贴边 再平分剩余空间

flex-wrap 设置子元素是否换行

flex布局中，默认的子元素是不换行的 属性值：
1、nowrap 默认不换行
2、wrap 换行

align-itmes 设置侧轴上的子元素排列方式（单行）

属性值：
1、flex-start 默认值 从上到下
2、flex-end 从下到上
3、center 挤在一起居中（垂直居中）
4、stretch 拉伸

align-content 设置侧轴上的子元素的排列方式（多行）

属性值：
1、flex-start 默认值在侧轴的头部开始排列
2、flex-end 在侧轴的尾部开始排列
3、center 在侧轴中间显示
4、space-around 子项在侧轴平分剩余空间
5、space-between 子项在侧轴先分布在两头，再平分剩余空间
6、stretch 设置子项元素高度平分父元素高度

flex-flow

flex-direction:column;
flex-flow:wrap;
// 把上面两句话写到一起用
flex-flow：column wrap;

flex布局子项常见属性

flex属性

flex属性定义子项目分配剩余空间，用flex来表示占多少份数

.item {
    flex: <number>; /*default 0*/
}