CSS3布局扩展 之 Flex

一、基本介绍

flex 是一个CSS的display 属性中新添加一个值。
使用 display: flex;

二、Flex 确定主轴及其方向

 老版本
          容器
                    容器的布局方向
                        -webkit-box-orient:horizontal/vertical
                        控制主轴是哪一根
                            horizontal：x轴
                            vertical  ：y轴
                    容器的排列方向
                        -webkit-box-direction：normal/reverse
                        控制主轴的方向
                            normal：从左往右（正方向）
                            reverse：从右往左（反方向）
                    富裕空间的管理
                        只决定富裕空间的位置，不会给项目去分配空间
                        主轴
                            -webkit-box-pack
                                主轴是x轴
                                    start：在右边
                                    end:    在左边
                                    center：在两边
                                    justify：在项目之间
                                主轴是y轴
                                    start：在下边
                                    end：在上边
                                    center：在两边
                                    justify：在项目之间
                        侧轴
                            -webkit-box-algin
                                侧轴是x轴
                                    start：在右边
                                    end：  在左边
                                    center：在两边
                                侧轴是y轴
                                    start：在下边
                                    end：   在上边  
                                    center：在两边
            项目
                    弹性空间管理
                        -webkit-box-flex：弹性因子（默认值为0）
    新版本
            容器
                    容器的布局方向
                    容器的排列方向
                        flex-direction
                        控制主轴是哪一根，控制主轴的方向
                            row;        从左往右的x轴 
                            row-reverse;从右往左的x轴
                            column;     从上往下的y轴
                            column-reverse;从下往上的y轴
                    富裕空间的管理
                        只决定富裕空间的位置，不会给项目区分配空间
                        主轴
                            justify-content
                                    flex-start：     在主轴的正方向
                                    flex-end:       在主轴的反方向
                                    center：         在两边
                                    space-between：  在项目之间
                                     space-around：  在项目两边

                        侧轴
                            align-items
                                    flex-start：在侧轴的正方向
                                    flex-end：    在侧轴的反方向
                                    center：     在两边
                                    base#ne    基线对齐
                                    stretch     等高布局（项目没有高度）    
            项目
                    弹性空间管理
                        flex-grow：定义弹性盒子项（flex item）的拉伸因子。
                         默认值为0

三、Flex新增属性

容器
     flex-wrap：控制的是侧轴的方向
                nowrap 不换行
                wrap   侧轴方向由上而下             （flex-shrink失效）
                wrap-reverse 侧轴方向由下而上   （flex-shrink失效）
      align-content：多行/列时侧轴富裕空间的管理（把多行/列看成一个整体），对单行/列无效
                flex-start：所有行/列从侧轴起点开始填充。第一行/列的侧轴起点边和容器的侧轴起点边对齐。
                                                                                  接下来的每一行/列紧跟前一行/列。
                flex-end ：所有弹性元素从侧轴末尾开始填充。最后一个弹性元素的侧轴终点和容器的侧轴终点对齐。
                                                                              同时所有后续元素与前一个对齐。
                center：所有行/列朝向容器的中心填充。每行/列互相紧挨，相对于容器居中对齐。
                                                                       容器的侧轴起点边和第一行/列的距离相等于容器的侧轴终点边和最后一行/列的距离。
                space-between：所有行/列在容器中平均分布。相邻两行/列间距相等。
                                                                                           容器的侧轴起点边和终点边分别与第一行/列和最后一行/列的边对齐。
                space-around：所有行/列在容器中平均分布，相邻两行/列间距相等。
                                                                                       容器的侧轴起点边和终点边分别与第一行/列和最后一行/列的距离是相邻两行/列间距的一半。
                                                        注意：space-between与space-around最大的区别是前者中元素与起点边终点边不存在间距，而后者存在间距
                stretch：拉伸所有行/列来填满剩余空间。剩余空间平均的分配给每一行/列       

      flex-flow ：flex-flow 属性是 flex-direction 和 flex-wrap 的简写。
                默认值：row nowrap
                控制主轴和侧轴的位置以及方向  

 项目
      order :order 属性规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照 order 属性的值的增序进行布局。拥有相同 order 属性值的元素按照它们在源代码中出现的顺序进行布局
                默认值：0   不可继承

      align-self:align-self 属性定义flex子项单独在侧轴方向上的对齐方式。
                  align-self 会对齐当前 flex 行中的 flex 元素，并覆盖 align-items 的值. 如果任何 flex 元素的侧轴方向 margin 值设置为 auto，则会忽略 align-self。
                      默认值：auto 不可继承
                      值：                                                                                                                                          
                             auto:设置为父元素的 align-items 值，如果该元素没有父元素的话，就设置为 stretch。
                             flex-start:flex 元素会对齐到 容器的首端。
                             flex-end:flex 元素会对齐到容器的尾端。
                             center:flex 元素会对齐到容器的中间，如果该元素的 容器 的尺寸大于 flex 容器，将在两个方向均等溢出。
                             stretch:flex 元素将会基于容器的宽和高，按照自身 margin box 的 容器拉伸

       flex-shrink: flex-shrink 属性指定了 flex 元素的收缩因子  默认值为1
                   只对单行单列有效,建议开发时弃用

      flex-basis:flex-basis 指定了 flex 元素在主轴方向上的初始大小

      flex: flex 是 flex-grow，flex-shrink，flex-basis 的简写属性
             默认值   flex-grow: 0               不可继承
                     flex-shrink: 1
                     flex-basis: auto 

               值
                  flex: none;/* 0 0 auto */
                  flex：1;/* 1 1 0% */  等分布局