Flexible BOX弹性框架布局：2012年以前的写法-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43127471/article/details/89338413


BOX弹性框架布局：
/*  弹性框布局，-moz- -webkit浏览器兼容*/
	display: -moz-box;
	display: -webkit-box;
/*  box-pack:内部元素水平居中方式，-moz- -webkit浏览器兼容 */
	-moz-box-pack: center;
	/*  内部元素居中 */
	-webkit-box-pack: center;
/*元素纵向排列，orien表示方向 vertical表示纵向 horizontal默认横向*/
	-moz-box-orient: vertical;
	-webkit-box-orient: vertical;
/*（按100%显示）表示按比例显示：0表示固定宽度，其余为可变类型，1 表示占1份*/
	-moz-box-flex: 1;
	-webkit-box-flex: 1;	
/* box-direction方向属性，reverse表示从反向，逆向开始，容器中的子项目显示的排序开始方向  所以应该写在父级*/
	-moz-box-direction: reverse;
	-webkit-box-direction: reverse;
/* 设置项目显示的顺序  数字表示排列的顺序*/
	-webkit-box-ordinal-group: 4;
	-moz-box-ordinal-group: 4;

例子
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>416弹性框架深入理解</title>
		<style type="text/css">
			*{
				font-size: 20px;
				padding: 0;
				margin: 0;
			}
			body{
				/*  弹性框布局*/
				display: -moz-box;
				display: -webkit-box;
				/*  box-pack:内部元素水平居中方式，-moz- -webkit浏览器兼容 */
				-moz-box-pack: center;
				/*  内部元素居中 */
				-webkit-box-pack: center;
				
			}
			#wrapper {
				display: -moz-box;
				display: -webkit-box;
				height: 200px;
				max-width: 900px;
			/*box-flex 表示按比例显示：0表示固定宽度，其余为可变类型，1 表示占1份 2表示占2份*/	
				-webkit-box-flex: 1;
				-moz-box-flex: 1;
				-ms-box-flex: 1;
				 box-flex: 1;
				 /* 逆序排列 */
				 /* -webkit-box-direction: reverse;
				 -moz-box-direction: reverse; */
				 /* 纵向显示 */
				 -moz-box-orient: vertical;
				 -webkit-box-orient: vertical;	 
			}
			
			#wrapper .box1 {
				background-color: pink;
				-webkit-box-flex: 1;
				-moz-box-flex:1 ;
				-ms-box-flex:1 ;
				box-flex:1 ;
				color: white;
				text-align: center;
				-webkit-box-ordinal-group: 1;
				-moz-box-ordinal-group: 1;
				
				
			}
			
			#wrapper .box2 {
				background-color: #00D8FF;
				-webkit-box-flex: 1;
				-moz-box-flex: 1;
				-ms-box-flex: 1;
				box-flex: 1;
				color: white;
				text-align: center;
				-webkit-box-ordinal-group:3;
				-moz-box-ordinal-group: 3;
			}
			
			#wrapper .box3 {
				background-color: #00B498;
				-webkit-box-flex: 1;
				-moz-box-flex: 1;
				-ms-box-flex: 1;
				box-flex: 1;
				color: white;
				text-align: center;
				-webkit-box-ordinal-group: 2;
				-moz-box-ordinal-group: 2;
			}
			
			#wrapper .box4 {
				background-color: #01769C;
				-webkit-box-flex: 1;
				-moz-box-flex: 1;
				-ms-box-flex: 1;
				box-flex: 1;
				color: white;
				text-align: center;
				/* 项目显示的顺序 */
				-webkit-box-ordinal-group: 4;
				-moz-box-ordinal-group: 4;
			}

		</style>
		
	</head>
	<body>
		<div id="wrapper">
			<div class="box1">box1</div>
			<div class="box2">box2</div>
			<div class="box3">box3</div>
			<div class="box4">box4</div>
		</div>
	</body>
</html>

效果图