css-flex

1.父元素属性

//父元素变为弹性盒
display:flex   

//定义主轴方向
flex-direction:    row            //左 -> 右    (default)
                   row-reverse    //右 -> 左
                   column         //上 -> 下
                   column-reverse //下 -> 上

//是否换行
flex-wrap:        nowrap          //不换行      (default)
                  wrap            //换行
                  wrap-reverse    //反向换行

//基于主轴对齐方式
justify-content   flex-start      //头对齐      (default)
                  flex-end        //尾对齐
                  center          //中间对齐
                  space-between   //左右各一，中间自适应
                  space-around    //元素间，空袭相等(两边有间距)

//基于交叉轴对齐方式(单行)
align-items       
                  flex-start      //头对齐
                  flex-end        //尾对齐
                  center          //中间对齐
                  baseline        //文字基线对齐
                  strech          //高度未设置时，自动展开  (default)

//基于交叉轴对齐方式(多行)
                  align-content
                  flex-start
                  flex-end 
                  center
                  space-between
                  space-around
                  strech

2.子元素属性

//元素排列顺序(小在前)
    order    (default:0)

//子项基于交叉轴
    align-self:
                auto    (default)
                flex-start
                flex-end
                center
                baseline
                stretch

//子项占比
    flex = flex-grow + flex-shrink + flex-basis
            flex-grow:将剩余空间，按比例分配给盒子(default：0)
            flex-shrink：将超出的部分，按比例对盒子进行压缩(default：1)
            flex-basis:相当于width,但是权重高于width