CSS3中的弹性流体盒模型技术详解(二) 博客分类： div+csscss3 csscss3弹性布局自适应布局盒子模型

在上一篇文章《CSS3中的弹性流体盒模型技术详解(一)》里，我给大家列出了，从css1到css3各版本中盒子模型的基本元素。本篇我会把余下的属性进行详细讲解。

box-pack 作用：用来规定子元素在盒子内的水平空间分配方式

box-pack 语法：box-pack: start | end | center | justify;

 

start	对于正常方向的框，首个子元素的左边缘吸附在盒子的左边框显示 对于相反方向的框，最后子元素的右边缘吸附在盒子的右边框显示
end	对于正常方向的框，最后子元素的右边缘吸附在盒子的右边框显示 对于相反方向的框，首个子元素的左边缘吸附在盒子的左边框显示
center	均等分割剩余空间，一半在首个子元素之前，一半在最后子元素之后
justify	首尾子元素分别吸附在左右边框上，中间的子元素分割多余空间

 

注意：由于此属性还处于测试当中，所以为了兼容webkit核心的浏览器，需要加上-webkit-前缀，Mozilla核心的浏览器，需要加上前缀-moz-。

 

示例:

 

    box-pack:start;

 

.row{/*设置外围容器样式*/

margin:auto;

border:1px solid black;

width:600px;

height:400px;

margin-top:50px;

 

display:-webkit-box;/*兼容webkit或mozilla核心浏览器，启用弹性盒子模型*/

display:-moz-box;

display:box;

 

-webkit-box-orient:horizontal;/*水平方向显示，兼容webkit和mozilla核心浏览器*/

-moz-box-orient:horizontal;

box-orient:horizontal;

 

-webkit-box-align:center; /*在垂直方向上，居中显示*/

-moz-box-align:center;

box-align:center;

 

-webkit-box-pack:start; /*在水平方向上，正常情况下，从左侧显示。*/

-moz-box-pack:start;

box-pack:start;

}

    运行效果如下：

 

当然，如果盒子的顺序是从右到做，则上图就会吸附在右侧边框显示。

 

    box-pack:end;

.row{/*设置外围容器样式*/

margin:auto;

border:1px solid black;

width:600px;

height:400px;

margin-top:50px;

 

display:-webkit-box;/*兼容webkit或mozilla核心浏览器，启用弹性盒子模型*/

display:-moz-box;

display:box;

 

-webkit-box-orient:horizontal;/*水平方向显示，兼容webkit和mozilla核心浏览器*/

-moz-box-orient:horizontal;

box-orient:horizontal;

 

-webkit-box-align:center; /*在垂直方向上，居中显示*/

-moz-box-align:center;

box-align:center;

 

-webkit-box-pack: end; /*在水平方向上，正常情况下，吸附在右侧显示。*/

-moz-box-pack: end;

box-pack: end;

}

运行效果如下：

 

注：如果盒子内的显示顺序是相反方向，则它会吸附在左侧边框显示。

 

box-pack:center

.row{/*设置外围容器样式*/

margin:auto;

border:1px solid black;

width:600px;

height:400px;

margin-top:50px;

 

display:-webkit-box;/*兼容webkit或mozilla核心浏览器，启用弹性盒子模型*/

display:-moz-box;

display:box;

 

-webkit-box-orient:horizontal;/*水平方向显示，兼容webkit和mozilla核心浏览器*/

-moz-box-orient:horizontal;

box-orient:horizontal;

 

-webkit-box-align:center; /*在垂直方向上，居中显示*/

-moz-box-align:center;

box-align:center;

 

-webkit-box-pack: center;

-moz-box-pack: center;

box-pack: center;

}

    运行效果如下：

 

box-pack:justify

.row{/*设置外围容器样式*/

margin:auto;

border:1px solid black;

width:600px;

height:400px;

margin-top:50px;

 

display:-webkit-box;/*兼容webkit或mozilla核心浏览器，启用弹性盒子模型*/

display:-moz-box;

display:box;

 

-webkit-box-orient:horizontal;/*水平方向显示，兼容webkit和mozilla核心浏览器*/

-moz-box-orient:horizontal;

box-orient:horizontal;

 

-webkit-box-align:center; /*在垂直方向上，居中显示*/

-moz-box-align:center;

box-align:center;

 

-webkit-box-pack: justify; /*在水平方向上，正常情况下，从左侧显示。*/

-moz-box-pack: justify;

box-pack: justify;

}

运行效果如下:

 

 

 

---

box-direction 作用：box-direction规定了盒子内子元素以什么方向来排列。

box-direction 语法：box-direction: normal | reverse | inherit;

 

normal	以默认方式显示子元素
reverse	以相反方向显示子元素
inherit	从父容器继承box-direction

 

注意：由于此属性还处于测试当中，所以为了兼容webkit核心的浏览器，需要加上-webkit-前缀，Mozilla核心的浏览器，需要加上前缀-moz-。

 

示例：

 

    现在我就基于上面的例子，在样式表文件的 .row 里加上box-direction属性，大家一起观察分别观察它们的区别

 

 

 以水平方向显示子元素 box-orient:horizontal;

normal	.row{/*设置外围容器样式*/ … /*此处代码省略*/   -webkit-box-orient:horizontal;/*水平方向显示，兼容webkit和mozilla核心浏览器*/ -moz-box-orient:horizontal; box-orient:horizontal;   -webkit-box-pack:justify; /*在水平方向上，正常情况下，从左侧显示。*/ -moz-box-pack:justify; box-pack:justify;   -webkit-box-direction:normal; /*以正常方向显示*/ -moz-box-direction:normal; box-direction:normal; }	大家可以发现显示顺序还是以前默认的显示顺序， 水平方向，就是从左到右
reverse	.row{/*设置外围容器样式*/ … /*此处代码省略*/   -webkit-box-orient:horizontal;/*水平方向显示，兼容webkit和mozilla核心浏览器*/ -moz-box-orient:horizontal; box-orient:horizontal;   -webkit-box-pack:justify; /*在水平方向上，正常情况下，从左侧显示。*/ -moz-box-pack:justify; box-pack:justify;   -webkit-box-direction:reverse; /*以相反方向显示*/ -moz-box-direction: reverse; box-direction: reverse; }	应用上box-direction:reverse之后，显示方向颠倒了， 以前是从左到右，现在变成从右到左了。

 

以垂直方向显示子元素 box-orient: vertical;

normal	.row{/*设置外围容器样式*/ … /*此处代码省略*/   -webkit-box-orient:vertical;/*垂直方向显示，兼容webkit和mozilla核心浏览器*/ -moz-box-orient:vertical; box-orient:vertical;   -webkit-box-direction: normal; -moz-box-direction: normal; box-direction: normal; }	大家可以发现，当以垂直方向显示子元素时， normal属性采用默认的从上到下显示顺序。
reverse	.row{/*设置外围容器样式*/ … /*此处代码省略*/   -webkit-box-orient:vertical;/*垂直方向显示，兼容webkit和mozilla核心浏览器*/ -moz-box-orient:vertical; box-orient:vertical;   -webkit-box-direction:reverse; -moz-box-direction:reverse; box-direction:reverse; }	应用上box-direction:reverse之后，显示方向颠倒了， 以前是从上到下，现在变成从下到上了。

 

从上面的比较，大家可以看出，box-direction是根据当前子元素的显示方向（水平或垂直）来起作用的。

 

box-direction:inherit 这个大家可以私下自行测试。

 

---

box-flex 作用：box-flex属性规定了盒子内的子元素是否可以自动伸缩其尺寸，只要盒子内对应显示方向上有剩余空间，可伸缩元素就会扩展来填充这些空间。

box-flex 语法：box-flex: value。

 

value

元素的可伸缩值，柔性是相对，例如 box-flex:2.0 的子元素伸缩尺寸两倍于 box-flex:1.0的子元素

注意：由于此属性还处于测试当中，所以为了兼容webkit核心的浏览器，需要加上-webkit-前缀，Mozilla核心的浏览器，需要加上前缀-moz-。

 

示例：

 

    现在我们就来对box-flex的作用通过示例来证明一下：

 

对 sidebar 应用样式	.sidebar{/*给侧边栏添加样式*/ background-color:#00B366;   /*将应用了此样式的元素都设置为可伸缩元素*/ -webkit-box-flex:1.0;  -moz-box-flex:1.0; box-flex:1.0; }   .middle{/*给中间区域添加样式*/ background-color:#80C8FE; }   .article{/*给主体内容添加样式*/ background-color:#FEB380; }	从显示效果来看， 这正好证明了， 设置了box-flex的元素是有弹性的， 且只要盒子内对应显示方向上有剩余空间， 可伸缩元素就会扩展来填充这些空间。
对sidebar和middle应用样式	.sidebar{/*给侧边栏添加样式*/ background-color:#00B366;    /*将应用了此样式的元素都设置为可伸缩元素*/ -webkit-box-flex:1.0; -moz-box-flex:1.0; box-flex:1.0; }   .middle{/*给中间区域添加样式*/ background-color:#80C8FE;   /*将应用了此样式的元素都设置为可伸缩元素*/ -webkit-box-flex:2.0;  -moz-box-flex:2.0; box-flex:2.0; }   .article{/*给主体内容添加样式*/ background-color:#FEB380; }	从显示效果可以看出，当 .middle 样式设置了box-flex:2.0时， 应用了 .middle 样式的元素也变成了弹性元素，且伸缩尺寸是 box-flex:1.0的两倍。
对sidebar,middle和article应用样式	.sidebar{/*给侧边栏添加样式*/ background-color:#00B366;   -webkit-box-flex: 1.0;  -moz-box-flex:1.0; box-flex:1.0; }   .middle{/*给中间区域添加样式*/ background-color:#80C8FE;   -webkit-box-flex:2.0;  -moz-box-flex:2.0; box-flex:2.0; }   .article{/*给主体内容添加样式*/ background-color:#FEB380;   -webkit-box-flex:3.0;  -moz-box-flex:3.0; box-flex:3.0; }	这里大家得注意一下，大家可能会认为，.article应该占1/2的空间的， 怎么看.sidebar和.middle加起来都比.article大的啊   其实这里分配的原则是， 剩余空间按照对应比率来分配。   对sidebar来说，伸缩的空间 = 总剩余空间 *(1.0/6.0)； 对middle来说，伸缩的空间 = 总剩余空间*(2.0/6.0) ; 对article来说，伸缩的空间 = 总剩余空间 * (3.0/6.0);

 

---

box-flex-group 作用： 一组设置了box-flex-group元素当中，值最小的，占用全部剩余空间；值最小且相等，则平均分配剩余空间。

 

.sidebar{/*给侧边栏添加样式*/ background-color:#00B366;   -webkit-box-flex:1.0;  -moz-box-flex:1.0; box-flex:1.0;   -webkit-box-flex-group:1;  -moz-box-flex-group:1; box-flex-group:1; }   .middle{/*给中间区域添加样式*/ background-color:#80C8FE;   -webkit-box-flex:2.0;  -moz-box-flex:2.0; box-flex:2.0;   -webkit-box-flex-group:2;  -moz-box-flex-group:2; box-flex-group:2; }   .article{/*给主体内容添加样式*/ background-color:#FEB380;   -webkit-box-flex:2.0;  -moz-box-flex:2.0; box-flex:2.0;   -webkit-box-flex-group:1;  -moz-box-flex-group:1; box-flex-group:1; }

大家从效果图应该可以看出， 如果box-flex-group的值较大，则它只分配实际空间， 剩余空间分配给最小的一组 按比率分配。   这句话到底啥意思呢？ 我们从代码中可以看到：sidebar的box-flex-group为1，article的box-flex-group也为1， 所以 sidebar和article分配剩余的空间。 但是article的box-flex两倍于sidebar的box-flex， 所以剩余空间，article伸缩的空间 应该是 sidebar伸缩空间的两倍。

 

---

box-ordinal-group 作用：box-ordinal-group属性可以使我们定义子元素的显示顺序，值小的排在前，值大的排在后。

 

注意：由于此属性还处于测试当中，所以为了兼容webkit核心的浏览器，需要加上-webkit-前缀，Mozilla核心的浏览器，需要加上前缀-moz-。

 

示例：

 

我们先看一下，没有运用box-ordinal-group属性时的运行效果，样式代码如下：

.sidebar{/*给侧边栏添加样式*/

background-color:#00B366;

 

-webkit-box-flex:2.0; 

-moz-box-flex:2.0;

box-flex:2.0;

}

 

.middle{/*给中间区域添加样式*/

background-color:#80C8FE;

 

-webkit-box-flex:2.0; 

-moz-box-flex:2.0;

box-flex:2.0;

}

 

.article{/*给主体内容添加样式*/

background-color:#FEB380;

 

-webkit-box-flex:2.0; 

-moz-box-flex:2.0;

box-flex:2.0;

}

此时运行页面，效果如下：

 

 

根据上面页面，当前的显示顺序是 sidebar -> middle -> article

 

现在我们给这些子元素应用box-ordinal-group，且相应值 middle < article < sidebar，则我们期待的显示顺序应该是， middle -> article -> sidebar

 

样式代码如下：

.sidebar{/*给侧边栏添加样式*/

background-color:#00B366;

 

-webkit-box-flex:2.0; 

-moz-box-flex:2.0;

box-flex:2.0;

 

-webkit-box-ordinal-group:4;

-moz-box-ordinal-group:4;

box-ordinal-group:4;

}

 

.middle{/*给中间区域添加样式*/

background-color:#80C8FE;

 

-webkit-box-flex:2.0; 

-moz-box-flex:2.0;

box-flex:2.0;

 

-webkit-box-ordinal-group:2;

-moz-box-ordinal-group:2;

box-ordinal-group:2;

}

 

.article{/*给主体内容添加样式*/

background-color:#FEB380;

 

-webkit-box-flex:2.0; 

-moz-box-flex:2.0;

box-flex:2.0;

 

-webkit-box-ordinal-group:3;

-moz-box-ordinal-group:3;

box-ordinal-group:3;

}

运行页面，效果如下：

 

 

从效果图来看，的确是按照我们所期待的顺序显示的（ middle -> article -> sidebar）。

 

至此，CSS3新增弹性盒模型属性就讲完了，本节内容还是比较多的，但是它给了我们很多惊喜，让我们在页面布局方面更加收放自如。

 

下一节，我讲综合运用CSS3 弹性盒模型 属性 来手把手教大家 《CSS3实战开发: 弹性WEB界面设计（兼容移动端浏览器）》。

 

欢迎大家加入互联网技术交流群：62329335 

个人申明：所分享博文，绝对原创，并力争每一个知识点都通过实战演示来进行验证。