flex布局

            
        flex布局
            flex-direction: ;    --设置主轴方向

(reverse)--反转
                row         --默认 从左到右
                row-reverse:--从右到左
                column         --从上到下
                column-reverse     --从下到上

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

  flex-start     --默认值
                flex-end     --从尾部开始排列
                center         --在主轴对其
                space-around--平分剩余空间
                space-between--两边贴边 再平分剩余空间

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

        nowrap         --默认值 不换行
                wrap         --换行

            align-content: ;    --设置侧轴上的子元素的排列方式
      

         flex-start     --默认值 从上到下
                flex-end     --从上到下
                center         --挤在一起居中(垂直居中)
                stretch     --拉伸

            align-items: ;        --设置侧轴上的元素排列方式
          

     flex-start     --默认值 从上到下
                flex-end     --从上到下
                center         --挤在一起居中(垂直居中)
                stretch-around --子项在侧轴平分剩余空间
                space-between  --子项分布在两头 再分布平均空间
                strech:        --设置子项目元素高度平分元素高

            flex-flow: ;        --复合属性 相当设置了    flex-direction
                                                                            flex-wrap: ;