38.CSS3弹性伸缩布局【中】

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

一、混合过滤板（主要针对IE10浏览器伸缩布局效果）

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

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

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

         //需要IE前缀-ms-

           div{

                display：-ms-flexbox；

           }

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

         //设置从上往下排列

           div{

                -ms-flex-direction:column

           }

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

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

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

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

 

       2、flex-wrap   属性类似与旧版本中的bow-lines，但是box-lines我们没有讲解，原因是没有浏览器支持他

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

            div{

                -ms-flex-wrap：wrap；

            }

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

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

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

    

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

          //简写形式

            div{

                -ms-flex-flow：row wrap；

            }

 

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

           //按照中心对齐

            div{

                -ms-flex-pack：center；

            }

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

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

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

           (4)justify   伸缩项目平局分布

 

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

           //处理额外空间

            div{

               -ms-flex-align：center；

            }

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

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

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

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

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

 

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

             //设置比例分配

               p:nth-child(1){

                    -ms-flex：1；   

               }

               p:nth-child(2){

                    -ms-flex：3；

               }

               p:nth-child(3){

                    -ms-flex：1；

               }  

 

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

             //设置伸缩项目顺序

               p:nth-child(1){

                    -ms-flex-order：2；   

               }

               p:nth-child(2){

                    -ms-flex-order：3；

               }

               p:nth-child(3){

                    -ms-flex-order：1；

               }