CSS3盒子模型(Flexible Box Module)之位置排序应用详解

2010-05-22 16:37:20 作者：不详来源：Bolo的博客

CSS3 标准里引入了一些新的盒子模型参数，在 CSS2 的基础上，我们将能更灵活地调整页面上各个容器的大小和位置。详细的说明可以看这个文档。

通过学习和测试，我发现这种新的盒子模型布局对建立自适应布局的页面带来很大的好处。在这篇文章中，我的所有例子都基于以下HTML代码：

<body>
  <div id="box1">1</div>
  <div id="box2">2</div>
  <div id="box3">3</div>
</body>

容器的排列

在通常的情况下，页面上所有容器的顺序都按照载入的顺序排列。而使用CSS3提供的功能后，我们可以在不改变 HTML 结构的前提下随意改变容器显示的位置，这样不但给排版带来极大的方便，我们也可以利用这些功能进行流量整形。

在需用使用灵活盒子模型(Flexible Box Module)的时候，我们需要先把其父容器的Display 属性设置为box 或者inline-box 。

水平分布和垂直分布

我们可以通过box-orient 属性指定容器的分布轴，当这个属性的值为vertical 时其子容器将垂直分布（也可以为 block-axis ），当值为 horizontal 时其子容器讲水平分布（也可以为inline-axis ）。在本文的第一个例子里我使用了以下的CSS ：

#exemple1 .content{
 -moz-box-orient : horizontal;
 -webkit-box-orient : horizontal;
 box-orient : horizontal;
}
 
#exemple1 .boite{
 -moz-box-flex : 1;
 -webkit-box-flex : 1;
 box-flex : 1;
}

具体的效果请运行下面代码，三个子 Div 容器都横向并列了。

<!doctype html="">
	<html lang="en">
		<head>
			<meta charset="utf-8" />
			<title></title>
			<style type="text/css">
/* -------------------------------------- *
* Global style to make the page "pretty" *
* -------------------------------------- */
html, body{
padding : 0;
margin : 0;
height : 100%;
width : 100%
}
body{
padding : 0;
margin : 0;
font : 0.9em Arial, Helvetica, sans-serif;
background : #000
}
.block{
background : #FFF;
width : 400px;
height : 150px;
margin : 0 auto 2em;
}
.content{
width : 400px;
height : 150px;
}
a{
color : #CCF;
}
h1{
font-size : 1.4em;
color : #FFF;
border-bottom : 1px solid #FFF;
width : 400px;
margin : 1em auto;
text-align : center;
padding-bottom : 0.6em;
}
p{
font : 12px Verdana, Arial, Helvetica, sans-serif;
color : #FFF;
border-top : 1px solid #FFF;
width : 400px;
margin : 1em auto;
text-align : center;
padding-top : 0.6em;
}
h2{
font : 14px Verdana, Arial, Helvetica, sans-serif;
background : #CCC;
margin : 2em auto 0;
padding : 8px;
width : 384px;
-moz-border-radius : 5px 5px 0 0;
-webkit-border-radius : 5px 5px 0 0;
border-radius : 5px 5px 0 0;
}
.boite strong{
display : block;
padding : 10px;
}
.v1{
background : #FCC;
}
.v2{
background : #CFC;
}
.v3{
background : #CCF;
}
/* -------------------------------- *
* The flexible box model in action *
* -------------------------------- */
.content{
display : -moz-box;
display : -webkit-box;
display : box;
}
/*************
* EXAMPLE 1 *
*************/
#exemple1 .content{
-moz-box-orient : horizontal;
-webkit-box-orient : horizontal;
box-orient : horizontal;
}
#exemple1 .boite{
-moz-box-flex : 1;
-webkit-box-flex : 1;
box-flex : 1;
}
/*************
* EXAMPLE 2 *
*************/
#exemple2 .content{
-moz-box-orient : vertical;
-moz-box-direction : reverse;
-webkit-box-orient : vertical;
-webkit-box-direction : reverse;
box-orient : vertical;
box-direction : reverse;
}
#exemple2 .boite{
-moz-box-flex : 1;
-webkit-box-flex : 1;
box-flex : 1;
}
/*************
* EXAMPLE 3 *
*************/
#exemple3 .content{
-moz-box-orient : vertical;
-moz-box-direction : reverse;
-webkit-box-orient : vertical;
-webkit-box-direction : reverse;
box-orient : vertical;
box-direction : reverse;
}
#exemple3 .boite{
-moz-box-flex : 1;
-webkit-box-flex : 1;
box-flex : 1;
}
#exemple3 .v1{
-moz-box-ordinal-group : 2;
-webkit-box-ordinal-group : 2;
box-ordinal-group : 2;
}
#exemple3 .v2{
-moz-box-ordinal-group : 2;
-webkit-box-ordinal-group : 2;
box-ordinal-group : 2;
}
#exemple3 .v3{
-moz-box-ordinal-group : 1;
-webkit-box-ordinal-group : 1;
box-ordinal-group : 1;
}			</style>
		</head>
		<body>
			<h1>
				CSS3 盒子模型案例</h1>
			<h2>
				1 - 盒子横向排列</h2>
			<div class="block" id="exemple1">
				<div class="content">
					<div class="boite v1">
						<strong>1</strong></div>
					<div class="boite v2">
						<strong>2</strong></div>
					<div class="boite v3">
						<strong>3</strong></div>
				</div>
			</div>
			<h2>
				2 - 盒子纵向反序排列</h2>
			<div class="block" id="exemple2">
				<div class="content">
					<div class="boite v1">
						<strong>1</strong></div>
					<div class="boite v2">
						<strong>2</strong></div>
					<div class="boite v3">
						<strong>3</strong></div>
				</div>
			</div>
			<h2>
				3 - 盒子按指定顺序纵向排列</h2>
			<div class="block" id="exemple3">
				<div class="content">
					<div class="boite v1">
						<strong>1</strong></div>
					<div class="boite v2">
						<strong>2</strong></div>
					<div class="boite v3">
						<strong>3</strong></div>
				</div>
			</div>
		</body>
	</html>
	</!doctype>

提示:可以对代码修改后再运行。

注：这个效果在 CSS2 里理论上也可以通过 Display: inline; 实现，但由于某些浏览器的BUG ，没人会这样做。

反序排列

box-direction 属性可以让我们随意改变容器的显示顺序。我们知道，在默认的情况下，block 级元素是按照加载顺序从上到下排列，inline 级元素是从左到右排列的，但现在通过box-direction 属性我们可以让最后加载的 block 级元素显示在最顶部，最后加载的 inline 级元素显示在左边。

但在使用这个属性的时候要注意它可能会改变元素的某些属性，产生一些不能控制的效果。

在第二个例子里，我使用了以下的 CSS ：

#exemple2 .content{
 -moz-box-orient : vertical;
 -moz-box-direction : reverse;
 
 -webkit-box-orient : vertical;
 -webkit-box-direction : reverse;
 
 box-orient : vertical;
 box-direction : reverse;
}
 
#exemple2 .boite{
 -moz-box-flex : 1;
 -webkit-box-flex : 1;
 box-flex : 1;
}

看效果请运行下面代码。可以发现，在不改变 HTML 结构的情况下，容器的排列顺序改变了。

提示:可以对代码修改后再运行。

相关热词：CSS3 盒子模型排序 CSS布局

分享到：

更多...

收藏至我的帐号

教程排行榜: 21个令人惊叹的CSS技术（案例）展示; 看这些用CSS3绘制的图标，你震撼了吗; HTML5的Video标签详细说明手册; 如何使一个DIV层居中于浏览器中？; 加一段代码让IE6支持hover伪类效果; IE PNG Fix—让IE6完美支持PNG透明图片的插件; CSS Sprite(CSS精灵)的优点和使用方法; 最新的IE6、IE7和IE8的CSS BUG汇总列表; 深入理解CSS的inherit与auto之间区别; 用浮动清除LI元素在IE6中底部3像素的BUG; CSS3教程：17种用CSS实现的很酷炫的立体网...; 解决IE6下PNG图片透明的最佳方法; IE的几个最常见BUG及解决方案; DIV+CSS布局两列右列宽度自适应布局的不同...; CSS样式的postion属性absolute和fixed的区别; CSS教程：用相对定位实现简单的图片边框阴...

下载排行榜: 基于jQuery的超炫酷的3D切换JS幻灯焦点图特效代码; 半透明立体质感的宽屏flash+xml焦点幻灯代码; 简洁效果多图切换flash幻灯焦点图代码; 带标题和数字导航的JS焦点幻灯特效代码; 适合摄影网站超漂亮的宽屏flash+xml幻灯轮换代码; 31款简单实用的CSS+JS下拉菜单脚本; 3D立体效果金字塔环形旋转的flash+xml相册代码; 基于jQuery实现的瀑布流布局列表特效代码; 透明质感上下滑动带小图预览5屏JS焦点图幻...; 超酷的3D摩天轮flash+xml相册幻灯图片代码; 能沿多个方向滑动切换的jquery幻灯代码; 自带多种幻灯效果支持缩略图导航的jquery画...; 可改图片尺寸和张数的flash幻灯轮换代码; 很好看的带缓冲效果CSS下拉菜单导航代码; 基于jquery很有趣的360度全景图片预览特效; 6屏幻灯上下滑动式带缩略图和文字介绍的fla...