flex布局中的方法用法

       flex:

        开启:  display:flex;

        容器：

              justify-content:center横轴方向居中对其； flex-end 靠右对齐； space-between 左右两端对齐且项目间距相等；

                              space-around 项目间距是左右两端项目到容器距离的二倍 ； space-evenly 项目间距与容器距离相等；

              align-items:flex-start 默认; center 交叉轴居中排列；flex-end 靠着交叉轴底部对齐

              flex-direction:row 默认按行分布；row-reverse; 行分布反转 column 按列分布； column-reverse 列分布反转；

              flex-wrap nowrap 默认 当项目总宽度大于容器宽度时项目会强行等分容器且不换行

                        warp 项目会根据自身宽度进行排列，超出自然换行

        项目：order 数值越小项目排列越靠前

              align-self:conter 单独居中排列 flex-end 靠底端对齐

              flex-grow:0 项目有剩余空间时默认不放大 0 0 1 最后的项目占满剩余空间 ；0 1 1 后两个项目平分剩余空间

              flex-shrink：1 默认1空间不足时大家一起等比缩小； 0 不缩小

              flex-basis :auto 项目保持默认宽度，或者以width为自身宽度，但如果设置了flex-basis:宽度 权重比width属性高，覆盖width属性

              flex :0 1 auto 默认； auto(1 1 auto)等分放大缩小 none(0 0 auto)不放大，但等分缩小