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

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

按指定顺序排列

我们不但可以让一组同级容器反序排列，而且还可以让它们按自己喜欢的顺序排列，box-ordinal-group 属性可以帮我们做到这一点。通过 box-ordinal-group 为各个容器指定一个序号，默认情况下他们将会按照序号递增的顺序排列。要注意的是：没有指定序号的容器默认都为1，并且序号相同的元素将按照加载顺序排列。大家可以看一下下面的CSS ：

#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;
}

在上面的 CSS 里，我把第一和第二个容器的序号都定为 2 ，第三个容器序号为 1 ，因此最终效果应该是 v3 排在第一，v1 和 v2 则根据加载顺序，v1 排在 v2 前面。效果可以看下面的代码演示。

<!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>

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

后记

CSS3 真的非常强大，我相信在它普及以后，我们做网页的时候将可以减少大量的JavaScript 。关于CSS3盒子模型的介绍还没完，这篇文章只介绍了一下容器的排序，下一次将说说容器的尺寸。

相关热词：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...