CSS3的弹性盒模型
css3引入了新的盒模型处理机制，即弹性盒模型，该模型用于决定元素在盒子中的分布方式及如何处理盒子的可用空间。在使用弹性盒子模型时，用户需要先把父容器的display属性设置为box或者inline-box。
1、box-orient属性可用于定义盒子元素内部的流动布局方向。可以取值为：
a、horizontal:盒子元素从左到右在一条水平线上显示它的子元素。
<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8">
<title></title>
</head>
<style>
div{
width:350px;
height:150px;
border:1pxsolid black;
display:-moz-box;
display:-webkit-box;
display:box;
-moz-box-orient:horizontal;
-webkit-box-orient:horizontal;
box-orient:horizontal;
}
</style>
</head>
<body>
<div>
<p>段落 1。</p>
<p>段落 2。</p>
<p>段落 3。</p>
</div>
<p><b>注释：</b>IE 不支持 box-orient 属性。</p>
</body>
</html>
b.vertical:盒子元素从上到下在一条垂直线上显示它的子元素。
display:box;
-moz-box-orient:vertical;
-webkit-box-orient:vertical;
box-orient:vertical;
c.inline-axis：沿着行内轴来排列子元素（映射为 horizontal）。
<style>
div{
width:350px;
height:150px;
border:1pxsolid black;
display:-moz-box;
display:-webkit-box;
display:box;
-moz-box-orient:inline-axis;
-webkit-box-orient:inline-axis;
box-orient:inline-axis;
}
</style>
</head>
<body>
<div>
<p>段落 1。</p>
<p>段落 2。</p>
<p>段落 3。</p>
</div>
<p><b>注释：</b>IE 不支持 box-orient 属性。</p>
</body>
</html>
d.block-axis: 沿着块轴来排列子元素（映射为vertical）。
e. inherit:应该从父元素继承 box-orient 属性的值。
2、box-direction：该属性可以改变盒子元素内部元素的流动顺序。
可以取值为：
a、normal：正常顺序。
c、reverse：相反显示
d、inherit：继承上级元素的显示顺序。
浏览器支持情况：webkit引擎的浏览器（包括safari和chorme等）支持-webkit-box-direction私有属性。Mozilla gecko引擎的浏览器支持（包括Firefox等）支持-moz-box-direction私有属性。
3、box-ordinal-group属性能够设置每个子元素在盒子中的具体显示位置，该属性可以取值为：
a、integer：一个整数，指示子元素的显示次序。
<!DOCTYPEhtml>
<html>
<head>
<style>
.box
{
display:-moz-box;/* Firefox */
display:-webkit-box;/* Safari and Chrome */
display:box;
border:1pxsolid black;
}
.ord1
{
margin:5px;
-moz-box-ordinal-group:1;/* Firefox */
-webkit-box-ordinal-group:1;/* Safari and Chrome */
box-ordinal-group:1;
}
.ord2
{
margin:5px;
-moz-box-ordinal-group:2;/* Firefox */
-webkit-box-ordinal-group:2;/* Safari and Chrome */
box-ordinal-group:2;
}
</style>
</head>
<body>
<divclass="box">
<divclass="ord2">第一个 DIV</div>
<divclass="ord1">第二个 DIV</div>
<divclass="ord1">第三个 DIV</div>
</div>
<p><b>注释：</b>IE 或 Opera 不支持 box-ordinal-group 属性。</p>
</body>
</html>
浏览器支持情况：webkit引擎的浏览器支持-webkit-box-ordinal-ground私有属性，Mozilla gecko引擎的浏览器支持-moz-box-ordinal-group私有属性。
各个主浏览器对box-ordinal-ground属性兼容情况如下所示：
4.box-flex属性能够灵活地控制子元素在盒子中空间中的显示空间。注意，在显示空间包括子元素的宽度和高度，而不只是子元素所在栏目的宽度，也可是说是子元素在盒子中所占的面积。
可以取值为：
a、value：元素的可伸缩行。柔性是相对的，例如 box-flex 为 2 的子元素两倍于 box-flex 为 1 的子元素
<!DOCTYPE html>
<html>
<head>
<style>
div
{
display:-moz-box; /* Firefox */
display:-webkit-box; /* Safari and Chrome */
display:box;
width:300px;
border:1px solid black;
}
#p1
{
-moz-box-flex:5.0; /* Firefox */
-webkit-box-flex:5.0; /* Safari and Chrome */
box-flex:5.0;
border:1px solid red;
}
#p2
{
-moz-box-flex:2.0; /* Firefox */
-webkit-box-flex:2.0; /* Safari and Chrome */
box-flex:2.0;
border:1px solid blue;
}
</style>
</head>
<body>
<div>
<p id="p1">Hello</p>
<p id="p2">W3School</p>
</div>
<p><b>注释：</b>IE 不支持 box-flex 属性。</p>
</body>
</html>
、
5、box-pack属性可以在水平方向对盒子的富余空间进行管理。
可以取值为：
a、start：所有子元素都显示在盒子的左侧，富余的空间显示在盒子的右测
b、end：所有字元素都显示在盒子的右侧，富余的空间显示在盒子的左侧。
c、justify：富余的空间在盒子的两侧平均分配。。在第一个子元素和最后一个子元素之后不分配空间。
d、center：富余的空间在盒子的两侧平均分配。
6、box-align属性可以在垂直方向对盒子的富余空间进行管理。
可以取值为：
a、start：所有元素沿着盒子的上边缘排列，都显示在盒子的上部，富余的空间显示在盒子的底部。
b、end:所有子元素沿着盒子的下边缘排列，都显示在盒子的底部，富余的空间显示在盒子的上部。
c、center：富余的空间在盒子的上下两侧平均分配，即上面一半，下面一半。
d、baseline：所有盒子沿它们的基线排列，富余的空间可前可后显示。
e：stretch：每个子元素的高度被调整到适合盒子的高度显示。
7、box-line属性空间溢出管理：弹性布局盒子内的元素很荣誉“跑出”盒子的“包围圈”，这种现象被称为空间溢出。与传统的盒模型一样，css允许使用overflow属性处理溢出内容的显示方式。当然。
可以取值为：
a、single：所有子元素都单行或单列显示
b、multiple：所有子元素可以多行或多列显示
扫一扫
1221
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
