css flex布局容器组件常用属性

    /*01 主轴方向：从左到右（默认） | 从右到左 | 从上到下 | 从下到上*/
    flex-direction: row | row-reverse | column | column-reverse;
 
    /*02 换行：不换行（默认） | 换行 | 换行并且第一行在下方*/
    flex-wrap: nowrap | wrap | wrap-reverse;
 
    /*03 主轴方向和换行简写方式*/
    flex-flow: {flex-direction} {flex-wrap};
 
    /*04 主轴对齐方式： 靠左对齐（默认） | 靠右对齐 | 居中对齐 | 两端对齐 | 平均分布*/
    justify-content: flex-start | flex-end | center | space-between | space-around;
 
    /*05 交叉轴对齐方式： 顶部对齐（默认） | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/
    align-items:  flex-start | flex-end | center | baseline | stretch;
 
    /*06 多主轴对齐方式： 顶部对齐（默认） | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 上下平均分布*/
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;