CSS-FlexBox总结（API）

-----------------学习笔记---------------

1.老版本与新版本本质上的一些差异
（1）老版本没有“换行”、“收缩”，也就是说老版本的容器只能放一行item，且当一行放不下时，既不会换行，也不会收缩，而是选择溢出。
（2）老版本由于没有“换行”，因此侧轴没有方向而言，只有哪一根是侧轴而已。

2.老版本属性
【容器】display:-webkit-box
【容器】【主轴是哪一根】-webkit-box-orient: horizontal(默认值) | vertical
【容器】【主轴方向】-webkit-box-direction:normal(默认值) | reverse
【容器】【富裕空间管理-主轴】-webkit-box-pack:start(默认值) | end | center | justify 
【容器】【富裕空间管理-侧轴】-webkit-box-align:start(默认值) | end |center

【项目】【弹性空间管理】-webkit-box-flex:number 默认值0 不可继承

3.新版本属性
【容器】display:flex | -webkit-flex（当它成为标准时就去掉了-webkit前缀）
【容器】【主轴是哪一根&主轴的方向】flex-direction:row | column | row-reverse | column-reverse
【容器】【富裕空间管理-主轴】justify-content:flex-start(默认值) | flex-end | center | space-between | space-around
【容器】【富裕空间管理-侧轴-单行/单列一个整体】align-items:stretch(默认值，等高布局) | flex-start| flex-end | center | baseline(基线对齐)
【容器】【富裕空间管理-侧轴-多行/多列一个整体】align-content:stretch(默认值) | flex-start | flex-end | center | space-between | space-around
【容器】【是否换行，侧轴方向】flex-wrap:nowrap(默认值) | wrap | wrap-reverse
【容器】【简写属性，主轴和侧轴分别为哪一根以及方向】flex-flow:flex-direction flex-wrap

【项目】【item优先级，越小越靠前】order:number，默认值0，不可继承
【项目】【富裕空间管理-侧轴-当前item】align-self:auto(默认值，设置父元素align-items，若无父元素则stretch) | stretch | flex-start| flex-end | center | baseline
【项目】【弹性空间管理-伸缩基准-mainSize初始大小】flex-basis:auto(默认值，设置为默认width/height)，不可继承
【项目】【弹性空间管理-伸】flex-grow:number，初始值为0
【项目】【弹性空间管理-缩】flex-shrink:number,初始值为1，只有flex-basis不为0且flex-wrap不为wrap也不为wrap-reverse生效
【项目】【简写属性】flex:包含了三个属性flex-grow flex-shrink flex-basis，    flex: none;/* 0 0 auto */  flex：1;/* 1 1 0% */
                    flex:2;等价于flex-grow:2;flex-shrink:1;flex-basis:0%;用于实现等宽布局（主轴方向上等尺寸）

4.新版本富裕空间管理
（1）如果是单行/单列，那么align-content不起作用，取决于align-items和align-self，其中align-self优先级更高。
（2）如果是多行/多列，那么align-items和align-self不起作用，取决于align-content

5.新版本空间管理计算
（1）富裕空间管理
    只决定富裕空间的位置，不会给项目区分配空间
（2）弹性空间管理规则
        flex-basis（默认值为auto）
        flex-grow（默认值为0）
            可用空间 = (容器大小 - 所有相邻项目flex-basis的总和)
            可扩展空间 = (可用空间/所有相邻项目flex-grow的总和)
            每项伸缩大小 = (伸缩基准值flex-basis + (可扩展空间 x flex-grow值))
        flex-shrink（默认值为1）
               --.计算收缩因子与基准值乘的总和  
                           var a = 每一项flex-shrink*flex-basis之和
               --.计算收缩因数
                                 收缩因数=（项目的收缩因子*项目基准值）/第一步计算总和   
                         var b =  (flex-shrink*flex-basis)/a
               --.移除空间的计算
                                  移除空间= 项目收缩因数 x 负溢出的空间（所有相邻项目flex-basis的总和-容器大小） 
                         var c =    b * 溢出的空间 
（3）对弹性空间管理的说明
    因为弹性空间管理中，无论是“伸”，还是“缩”，都与flex-basis密切相关，伸的条件是：(容器大小 - 所有相邻项目flex-basis的总和) > 0
                                                                  缩的条件是：(容器大小 - 所有相邻项目flex-basis的总和) < 0 
    所以当flex-basis:0时，肯定是“伸”，不会是“缩”，所以flex-shrink生效的条件之一就是flex-basis不能为0，也就是上述可用空间为负值。
    此外，如果flex-wrap为wrap或者wrap-reverse，那么就不会出现“缩”，因为已经利用换行来处理一行放不下的问题了。