弹性盒模型

		<!--
			弹性盒模型--box
			1.注意在使用弹性盒模型的时候，父级必须要加
				display:box或者display:inline-box
					flex: display:flex
					box:  display:-webkit-box
			2.box-orient定义盒模型的主轴方向
				flex: flex-direction:row/column
				box:  -webkit-box-orient
					horizontal 水平方向
					vertical 垂直方向
			3.box-direction 元素排列顺序
				flex: flex-direction:row-reverse/column-reverse;
				box:  -webkit-box-direction
					normal 正序
					reverse 反序
			4.box-pack主轴方向富裕空间管理
				flex: justify-content:flex-start/flex-end/center/space-between/space-around;
				box:  -webkit-box-pack
						start所有子元素在盒子左侧显示，富裕空间在右侧
						end所有子元素在盒子右侧显示，富裕空间在左
						center所有子元素居中
						justify富裕空间在子元素之间平均分配
			5.box-align侧轴方向富裕的空间管理
				flex: align-items:flex-start/flex-end/center/baseline;
				box:  -webkit-box-align
						start所有子元素在据顶
						end所有子元素在据底
						center所有子元素居中
			6.box-flex定义盒子的弹性空间
				flex: flex-grow
				box:  -webkit-box-flex
				子元素的尺寸=盒子的尺寸*(子元素的box-flex属性/所有子元素的box-flex属性值的和)
			7.box-ordinal-group设置元素的具体位置
				flex:	order
				box:	-webkit-box-ordinal-group
		-->
		<div id="box">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
		</div>

1.新版display:flex

body{
	margin: 0 auto;
}
#box{
	height: 100px;
	border: 1px solid #000;
				
	/*先版弹性盒模型*/
	display:flex;
}
#box div{
	width: 50px;
	height: 50px;
	background: red;
	font-size: 20px;
	color: #fff;
				
	margin: auto;
}

设置主轴方向和元素排列顺序

body{
	margin: 0 auto;
}
#box{
	height: 100px;
	border: 1px solid #000;
				
	/*新版弹性盒模型*/
	display:flex;
	/*设置主轴方向*/
	/*flex-direction:row;*/
	/*flex-direction:column;*/
	
	/*元素排列顺序*/
	/*横向从主轴的最右边往左反向排序*/
	/*flex-direction:row-reverse;*/
	/*横向从主轴的最底部往上反向排序*/
	flex-direction:column-reverse;
	/*display: -webkit-box;*/
}
#box div{
	width: 50px;
	height: 50px;
	background: red;
	font-size: 20px;
	color: #fff;
}

主轴方向富裕空间管理

body{
	margin: 0;
}
#box{
	height: 100px;
	border: 1px solid #000;
				
	/*新版弹性盒模型*/
	display:flex;
	
	/*所有子元素在盒子左侧显示，富裕空间在右侧*/
	/*justify-content: flex-start;*/
	
	/*所有子元素在盒子右侧显示，富裕空间在左侧*/
	/*justify-content: flex-end;*/
	
	/*所有子元素居中*/
	/*justify-content: center;*/
	
	/*富裕空间平均分配在每两个元素之间*/
	/*justify-content: space-between;*/
	
	/*富裕空间平均分配在每个元素两侧*/
	justify-content: space-around;
	
	/*老版弹性盒模型*/
	/*display: -webkit-box;*/
}
#box div{
	width: 50px;
	height: 50px;
	background: red;
	font-size: 20px;
	color: #fff;
}

侧轴方向富裕空间管理

body{
	margin: 0;
}
#box{
	height: 100px;
	border: 1px solid #000;
				
	/*新版弹性盒模型*/
	display:flex;
	/*元素在侧轴开始位置，富裕空间在侧轴结束位置*/
	/*align-items:flex-start;*/
	
	/*元素在侧轴结束位置，富裕空间在侧轴开始位置*/
	/*align-items:flex-end;*/
	
	/*元素在侧轴中间位置，富裕空间在侧轴两侧*/
	/*align-items:center;*/
	
	/*根据侧轴上文字的基线对齐*/
	align-items:baseline;
	
	/*display: -webkit-box;*/
	
}
#box div{
	width: 50px;
	height: 50px;
	background: red;
	font-size: 20px;
	color: #fff;
}
#box div:nth-of-type(2){
	line-height: 50px;
}

2.老版弹性盒模型display:-webkit-box; display:inline-box;

body{
	margin: 0 auto;
}
#box{
	height: 100px;
	border: 1px solid #000;
				
	/*先版弹性盒模型*/
	/*display:flex;*/
	display: -webkit-box;
}
#box div{
	width: 50px;
	height: 50px;
	background: red;
	font-size: 20px;
	color: #fff;
}

设置主轴方向和元素排列顺序

body{
	margin: 0;
}
#box{
	height: 100px;
	border: 1px solid #000;
				
	/*新版弹性盒模型*/
	/*display:flex;*/
	/*老版弹性盒模型*/
	display: -webkit-box;
	/*设置主轴方向*/
	/*-webkit-box-orient:horizontal;*/
	/*-webkit-box-orient:vertical;*/
	
	/*元素排列顺序*/
	/*正序从左向右*/
	/*-webkit-box-direction:normal;*/
	/*-webkit-box-direction:reverse;*/
	
	/*两个配合得到纵向的反向顺序*/
	-webkit-box-orient:vertical;
	-webkit-box-direction:reverse;
	
	
}
#box div{
	width: 50px;
	height: 50px;
	background: red;
	font-size: 20px;
	color: #fff;
}

主轴方向富裕空间管理

body{
	margin: 0;
}
#box{
	height: 100px;
	border: 1px solid #000;
				
	/*新版弹性盒模型*/
	/*display:flex;*/
	display: -webkit-box;
	
	/*所有子元素在盒子左侧显示，富裕空间在右侧*/
	/*-webkit-box-pack:start;*/
	
	/*所有子元素在盒子右侧显示，富裕空间在左*/
	/*-webkit-box-pack:end;*/
	
	/*所有子元素居中*/
	/*-webkit-box-pack:center;*/
	
	/*富裕空间在子元素之间平均分配*/
	-webkit-box-pack:justify;
	
}
#box div{
	width: 50px;
	height: 50px;
	background: red;
	font-size: 20px;
	color: #fff;
}

侧轴方向富裕空间管理

body{
	margin: 0;
}
#box{
	height: 100px;
	border: 1px solid #000;
				
	/*新版弹性盒模型*/
	/*display:flex;*/
	display: -webkit-box;
	
	/*元素在侧轴开始位置，富裕空间在侧轴结束位置*/
	/*-webkit-box-align:start;*/
	
	/*元素在侧轴结束位置，富裕空间在侧轴开始位置*/
	/*-webkit-box-align:end;*/
	
	/*所有子元素居中*/
	-webkit-box-align:center;
}
#box div{
	width: 50px;
	height: 50px;
	background: red;
	font-size: 20px;
	color: #fff;
}

定义盒子的弹性空间

body{
	margin: 0;
}
#box{
	height: 100px;
	border: 1px solid #000;
				
	/*新版弹性盒模型*/
	/*display:flex;*/
	display: -webkit-box;
}
#box div{
	/*新版*/
	/*flex-grow:1;*/
	/*老版*/
	-webkit-box-flex:1;
	width: 50px;
	height: 50px;
	background: red;
	font-size: 20px;
	color: #fff;
}

设置元素的具体位置

body{
	margin: 0;
}
#box{
	height: 100px;
	border: 1px solid #000;
				
	/*新版弹性盒模型*/
	/*display:flex;*/
	display: -webkit-box;
}
#box div{
	width: 50px;
	height: 50px;
	background: red;
	font-size: 20px;
	color: #fff;
}
#box div:nth-of-type(1){
	/*新版*/
	/*数值越小越靠前，可以接收负值*/
	/*order: 4;*/
	
	/*老版*/
	/*数值越小越靠前，接收的小于0的值都处理为1*/
	-webkit-box-ordinal-group:4;
}
#box div:nth-of-type(2){
	/*新版*/
	/*order: 3;*/
	-webkit-box-ordinal-group:3;
}
#box div:nth-of-type(3){
	/*新版*/
	/*order: 2;*/
	-webkit-box-ordinal-group:2;
}
#box div:nth-of-type(4){
	/*新版*/
	/*order: 1;*/
	-webkit-box-ordinal-group:1;
}

例子淘宝导航

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,user-scalable=no" />
		<title></title>
		<script type="text/javascript">
			(function(){
				var html=document.documentElement;
				var hWidth=html.getBoundingClientRect().width;
				html.style.fontSize=hWidth/15+'px';
			})()
		</script>
		<style type="text/css">
			body{
				margin: 0;
			}
			a{
				text-decoration: none;
			}
			.box{
				font-size: 0.42rem;
				display: -webkit-box;
				display: flex;
				padding: 0 0.5rem;
			}
			.box div{
				text-align: center;
				width: 0;
				-webkit-box-flex:1;
				flex-grow:1;
			}
			.box div a{
				line-height: 1rem;
			}
			.box div a:before{
				margin: 0 auto;
				display: block;
				content: '';
				width: 1.81rem;
				height: 1.81rem;
				background: url(img/tm1.png);
				background-size: 10.125rem 3.888888888888889rem;
			}
			.box:nth-of-type(1)  div:nth-of-type(1) a:before{
				background-position: -0.14rem -0.05rem;
			}
			.box:nth-of-type(1) div:nth-of-type(2) a:before{
				background-position: -2.13rem -0.05rem;
			}
			.box:nth-of-type(1) div:nth-of-type(3) a:before{
				background-position: -4.13rem -0.05rem;
			}
			.box:nth-of-type(1) div:nth-of-type(4) a:before{
				background-position: -8.13rem -0.05rem;
			}
			.box:nth-of-type(1) div:nth-of-type(5) a:before{
				background-position: -12.24rem -0.05rem;
			}
			
			.box:nth-of-type(2) div:nth-of-type(1) a:before{
				background-position: -0.14rem -2.09rem;
			}
			.box:nth-of-type(2) div:nth-of-type(2) a:before{
				background-position: -2.13rem -2.09rem;
			}
			.box:nth-of-type(2) div:nth-of-type(3) a:before{
				background-position: -4.13rem -2.09rem;
			}
			.box:nth-of-type(2) div:nth-of-type(4) a:before{
				background-position: -8.13rem -2.09rem;
			}
			.box:nth-of-type(2) div:nth-of-type(5) a:before{
				background-position: -12.24rem -2.09rem;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div><a href="javascript:;">天猫</a></div>
			<div><a href="javascript:;">聚划算</a></div>
			<div><a href="javascript:;">天猫国际</a></div>
			<div><a href="javascript:;">外卖</a></div>
			<div><a href="javascript:;">天猫超市</a></div>
		</div>
		<div class="box">
			<div><a href="javascript:;">充值中心</a></div>
			<div><a href="javascript:;">肥猪旅行</a></div>
			<div><a href="javascript:;">领金币</a></div>
			<div><a href="javascript:;">拍卖</a></div>
			<div><a href="javascript:;">分类</a></div>
		</div>
	</body>
</html>

posted @ 2018-02-26 17:55 carol72 阅读(180) 评论(0) 收藏举报

刷新页面返回顶部

carol72

弹性盒模型

1.新版display:flex

设置主轴方向和元素排列顺序

主轴方向富裕空间管理

侧轴方向富裕空间管理

2.老版弹性盒模型display:-webkit-box; display:inline-box;

设置主轴方向和元素排列顺序

主轴方向富裕空间管理

侧轴方向富裕空间管理

定义盒子的弹性空间

设置元素的具体位置

公告