39.CSS3弹性伸缩布局【下】

                                                     第二十九章   CSS3弹性伸缩布局【下】

一、新版本 （可以让心浏览器全面兼容，在未来浏览器更新换代中实现统一）

       首先，设置伸缩盒的display有如下两个属性

         （1）flex           将容器盒模型作为块级弹性伸缩盒显示（新版本）

         （2）inline-flex    将容器盒模型作为内联级弹性伸缩盒显示（新版本）

 

         //大部分不需要前缀

             div{

                  display：flex；

             }

             属性             IE      Firefox     Chrome      Opera      Safari     

         支持需带前缀         无        无        21～28       无         7.0

         支持不带前缀         11+       20+        29+        12.1         无

        从这张表可以看出，只有webkit引擎浏览器Chrome和Safari的版本需要添加-webkit-,而Chrome浏览器29版本以后就可以省略了

 

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

               *和混合版本内容基本一样*

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

        1、flex-direction   属性和旧版本box-orient属性一样，都是设置伸缩项目的排列方式

         //设置从上往下排列

           div{

                -ms-flex-direction:column

           }

           (1)row               设置从左到右排列

           (2)row-reverse       设置从右到左排列

           (3)column            设置从上到下排列

           (4)column-reverse    设置从下到上排列

 

        2、flex-wrap

          //设置无法容纳时，自动换行

            div{

                -ms-flex-wrap：wrap；

            }

           (1)nowrap           默认值，都在一行或一列显示

        *  (2)wrap             伸缩项目无法容纳时，自动换行

           (3)wrap-reverse     伸缩项目无法容纳时，自动换行，方向和wrap相反

 

        3、flex-flow    属性是集合了排列方向和控制换行的简写形式

          //简写形式

            div{

                -ms-flex-flow：row wrap；

            }

 

        4、justify-content   属性和旧版本中的box-pack一样，设置伸缩项目的对齐方式   

          //按照中心对齐

            div{

                justity-content:space-around;

            }

           (1)flex-start     伸缩项目以起始点靠齐

           (2)flex-end       伸缩项目以结束点靠齐

           (3)center         伸缩项目以中心点靠齐

           (4)space-between  伸缩项目平局分布

           (5)space-around   同上，但两端保留一半空间

 

        5、align-items  属性和旧版本box-align一样，处理伸缩项目的额外空间

              //处理额外空间

                div{

                    -moz-box-align:center;

                }

           (1)flex-start     伸缩项目以顶部为基准，清理下部额外空间

           (2)flex-end       伸缩项目以底部为基准，清理上部额外空间

           (3)center         伸缩项目以中部为基准，平均清理上下部恩爱空间

           (4)baseline       伸缩项目以基线为基准，清理额外空间

           (5)stretch        伸缩项目填充整个容器，默认

 

        6、align-self 和align-items一样，都是清理额外空间，但是他单独设置摸一个伸缩项目，所有的值和align-itmes一致

             //单独清理额外空间

              p:nth-child（2）{

                    align-self:center；

              }

 

        7、flex   属性和旧版本中的box-flex类似，用来控制伸缩容器的比例分配

               //设置比例分配

               p:nth-child(1){

                    flex：1；   

               }

               p:nth-child(2){

                    flex：3；

               }

               p:nth-child(3){

                    flex：1；

               }

 

        8、order   属性和 box-ordinal-group 属性一样控制伸缩项目出现顺序

            //设置伸缩项目顺序

               p:nth-child(1){

                    flex：1

                    order：3；   

               }

               p:nth-child(2){

                    flex：3；

                    order：2；

               }

               p:nth-child(3){

                    flex：1；

                    order：1；

               }  

转载于:https://www.cnblogs.com/keshuai752100461/p/8485245.html