css3基础---flex新版与旧版

 作用容器

    1.flex基础点

        ---什么是容器，什么是项目，什么是主轴，什么是侧轴？

        ---项目永远排列在主轴的正方向上

        ---flex分新旧两个版本

            -webkit-box

            -webkit-flex / flex

    

    2.注意点

        ---我们都知道新版本的flex要比老版本的flex强大很多，有没有必要学习老版本的flex？

            移动端开发者必须要关注老版本的flex

                因为很多移动端设备内核低只老版本的flex

        

        ---老版本的box通过两个属性四个属性值控制了主轴的位置和方向

              新版本的flex通过一个属性四个属性值控制了主轴的位置和方向

 

  ===========================================================================================

 

    3.老版本

        容器

            容器的布局方向

                -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：在两边

 

  ===========================================================================================           

             

    4.新版本

        容器

            容器的布局方向

            容器的排列方向

                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：     在两边

                            baseline    基线对齐

                            stretch     等高布局（项目没有高度）

 

  ===========================================================================================

  ===========================================================================================

  ===========================================================================================

作用项目

 

旧版本

 弹性空间管理

        将主轴上的富裕空间按比例分配到项目上!

 

-webkit-box-flex弹性空间的管理：将富裕空间按比例分配到各个项目上
-webkit-box-flex: 1;
默认值:0   不可继承

**********************************************************************************************************************************************

新版本

flex-grow: 1

 

 

  ===========================================================================================

  ===========================================================================================

  ===========================================================================================

 

新版flex布局详

作用容器

flex-wrap 属性控制了容器为单行/列还是多行/列。并且定义了侧轴的方向，新行/列将沿侧轴方向堆砌。
 
默认值：nowrap     不可继承
 
值：nowrap | wrap | wrap-reverse 

 

 

align-content 属性定义弹性容器的侧轴方向上有额外空间时，如何排布每一行/列。当弹性容器只有一行/列时无作用
默认值：stretch    不可继承  
 
值：
flex-start
    所有行/列从侧轴起点开始填充。第一行/列的侧轴起点边和容器的侧轴起点边对齐。
    接下来的每一行/列紧跟前一行/列。
flex-end
    所有弹性元素从侧轴末尾开始填充。最后一个弹性元素的侧轴终点和容器的侧轴终点对齐。
    同时所有后续元素与前一个对齐。
center
    所有行/列朝向容器的中心填充。每行/列互相紧挨，相对于容器居中对齐。
    容器的侧轴起点边和第一行/列的距离相等于容器的侧轴终点边和最后一行/列的距离。
space-between
    所有行/列在容器中平均分布。相邻两行/列间距相等。
    容器的侧轴起点边和终点边分别与第一行/列和最后一行/列的边对齐。
space-around
    所有行/列在容器中平均分布，相邻两行/列间距相等。
    容器的侧轴起点边和终点边分别与第一行/列和最后一行/列的距离是相邻两行/列间距的一半。
stretch
    拉伸所有行/列来填满剩余空间。剩余空间平均的分配给每一行/列       

 

 

flex-flow 属性是设置“flex-direction”和“flex-wrap”的简写
 
默认值：row nowrap    不可继承

控制主轴和侧轴的位置以及方向

flex-flow: row nowrap; 

 

   ===========================================================================================

 作用项目

 

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

order越大越后
 
默认值：0   不可继承

 

 

 align-self 单个项目对齐方式(单个元素富裕空间管理) 会对齐当前 flex 行中的 flex 元素，并覆盖 align-items 的值. 如果任何 flex 元素的侧轴方向 margin 值设置为 auto，则会忽略 align-self。
 
默认值：auto    不可继承
 值：

auto
    设置为父元素的 align-items 值，如果该元素没有父元素的话，就设置为 stretch。
flex-start
    flex 元素会对齐到 cross-axis 的首端。
flex-end
    flex 元素会对齐到 cross-axis 的尾端。
center
    flex 元素会对齐到 cross-axis 的中间，如果该元素的 cross-size 的尺寸大于 flex 容器，
    将在两个方向均等溢出。
baseline
    所有的 flex 元素会沿着基线对齐，
stretch
    flex 元素将会基于容器的宽和高，按照自身 margin box 的 cross-size 拉伸