弹性盒子布局 二

容器 (父元素)

    display:flex   : 让容器成员是弹性的项目
    flex-direction : 决定主轴是什么方向(项目排序方向)
                     row    : 横向
                     column : 竖的
                     row-reverse :横向翻转
                     column-reverse ：竖的翻转
    
    flex-wrap      : 让项目是否换行

                    nowrap : 不换行
                    wrap   : 换行
                    wrap-reverse ：换行翻转
    
    flex-flow      : direction wrap
     
    justify-content : 横向盒子摆放

                    flex-start    : 靠左
                    flex-end      : 靠右
                    center        : 水平居中
                    space-between : 项目两端对齐,项目之间的距离都相等
                    space-around  : 每个项目两侧距离相等，两侧距离比项目之间的距离小一倍
    
    algin-items     : 纵向盒子摆放

                    flex-start     : 靠上
                    flex-end       : 靠下
                    center         : 垂直居中
                    baseline       : 项目第一行文字为基线
                    stretch        : 如果容器没有设置高度或者auto则占满整个高度

容器成员|项目 (子元素)

        
        order       : 排序方式，数值越小，越靠前
        flex-grow   : 默认值0，比例放大
        flex-shrink : 默认值1，比例缩小
        flex-basis  : 相当于width
        flex:       ：复合(grow + shrink + basis)
                    默认值：0 1 auto
                    
                    后俩个值是可选择