父元素属性设置

|- 设置主轴方向
|-设置子元素是跟着主轴来排序的方式
|-默认的主轴是X 轴 Y轴是侧轴

flex-direction:{
    row         默认值    从左到右
    row-reverse 翻转      从右到左
    主轴是Y 轴 X轴是侧轴
    column  设置主轴方向    从上到下
    column-reverse 翻转   从下到上
}

设置主轴上的子元素 排序

默认从头开始排序

justify-content:{
    flex-start 默认值   从头开始排序 如果主轴是X轴，则是从左到右
    flex-end           从尾开始排序
    center             居中
    space-around       平均分配
    space-between       两边贴边 剩余分配给中间
}

设置主轴上的子元素换行

默认不换行

flex-wrap:{
    nowrap  默认不换行
    wrap    换行
}

设置侧轴上的子元素水平垂直居中配和 justify-content:center

使用于单行

align-items:{
     center    居中
     stretch   拉伸高度  注意：子元素不能设置高度不然不生效
}

设置侧轴上的子元素排序多行 注意 要和flex-wrap:wrap

使用于多行

align-content:{
    flex-start;     默认在侧轴从头开始排序
    flex-end;       在侧轴的从尾开始开始排序
    center;         居中
    space-around;   子项在侧轴平均分配剩下空间
    space-between;  子项在侧轴先分布在两头，再平分剩余空间
    stretch;        设置子项高度平分父元素的高度    注意：子元素不能设置高度不然不生效
}

该属性是 flex-direction 和 flex-wrap 简写

flex-flow:{
        flex-flow:column wrap; ==  flex-direction: column; flex-wrap: wrap;
}