弹性盒模型案例讲解

弹性盒模型的设置的方法为display:box 或display:inline-box
box-orient 为定义盒模型的布局方向,由于盒模型的只有在webkit或moz的内核才生效,故我们在使用这个属性之前要在它前面加上-webkit-或-moz-
box-orient的属性值有horizontal(水平),vertical(垂直)
下方代码是块状元素水平排列的,大家可以自己尝试一下改为垂直排列

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box{
				width: 900px;
				height: 600px;
				border: 1px solid #CCCCCC;
				display: -webkit-box;
				-webkit-box-orient: horizontal;
			}
			.box div{
				text-align: center;
				margin: 10px;
				width: 100px;
				height: 100px;
				line-height: 100px;
				color: #FFFFFF;
				background: #00A72B;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
		</div>
		
	</body>
</html> 


box-direction 为元素的排列顺序,属性值normal表示正序,reverse表示反序

    <style>
		.box{
			width: 800px;
			height: 600px;
			border: 1px solid #CCCCCC;
			display: -webkit-box;
			-webkit-box-orient: horizontal;
			-webkit-box-direction: reverse;	/*元素排列顺序*/
		}
		.box div{
			text-align: center;
			margin: 10px;
			width: 100px;
			height: 100px;
			line-height: 100px;
			color: #FFFFFF;
			background: #00A72B;
		}
	</style>  

box-ordinal-group 设置元素的具体位置

	    <style>
			.box{
				width: 800px;
				height: 600px;
				border: 1px solid #CCCCCC;
				display: -webkit-box;
				-webkit-box-orient: horizontal;
			}
			.box div{
				text-align: center;
				margin: 10px;
				width: 100px;
				height: 100px;
				line-height: 100px;
				color: #FFFFFF;
				background: #00A72B;
			}
			.box div:nth-of-type(6){	/*把第六个div放到第一位,以此类推*/
				-webkit-box-ordinal-group: 1;
			}
			.box div:nth-of-type(5){
				-webkit-box-ordinal-group: 2;
			}
			.box div:nth-of-type(4){
				-webkit-box-ordinal-group: 3;
			}
			.box div:nth-of-type(1){
				-webkit-box-ordinal-group: 6;
			}
			.box div:nth-of-type(2){
				-webkit-box-ordinal-group: 5;
			}
			.box div:nth-of-type(3){
				-webkit-box-ordinal-group: 4;
			}
		</style>  

box-flex 定义盒子的弹性空间
子元素的尺寸=盒子的尺寸*子元素的box-flex属性值 / 所有子元素的box-flex属性值的和

	    <style>
			.box{
				width: 800px;
				height: 600px;
				border: 1px solid #CCCCCC;
				display: -webkit-box;
				-webkit-box-orient: horizontal;
			}
			.box div{
				text-align: center;
				margin: 10px;
				width: 100px;
				height: 100px;
				line-height: 100px;
				color: #FFFFFF;
				background: #00A72B;
			}
			.box div:nth-of-type(1){
				-webkit-box-flex: 1;	/*如果所有数字都一样,则横向平均分布*/
			}
			.box div:nth-of-type(2){
				-webkit-box-flex: 1;
			}
			.box div:nth-of-type(3){
				-webkit-box-flex: 1;
			}
			.box div:nth-of-type(4){
				-webkit-box-flex: 1;
			}
			.box div:nth-of-type(5){
				-webkit-box-flex: 1;
			}
			.box div:nth-of-type(6){
				-webkit-box-flex: 1;
			}
		</style>

	    <style>
			.box{
				width: 800px;
				height: 600px;
				border: 1px solid #CCCCCC;
				display: -webkit-box;
				-webkit-box-orient: horizontal;
			}
			.box div{
				text-align: center;
				margin: 10px;
				height: 100px;
				line-height: 100px;
				color: #FFFFFF;
				background: #00A72B;
			}
			.box div:nth-of-type(1){
				-webkit-box-flex: 1;		/*占整体1/9*/
			}
			.box div:nth-of-type(2){		/*占整体1/9*/
				-webkit-box-flex: 1;
			}
			.box div:nth-of-type(3){		/*此div占整体5/9*/
				-webkit-box-flex: 5;
			}
			.box div:nth-of-type(4){		/*占整体1/9*/
				-webkit-box-flex: 1;
			}
			.box div:nth-of-type(5){		/*占整体1/9*/
 				-webkit-box-flex: 1;
			}
			
		</style>  

box-pack 对盒子富裕的空间进行管理
start 所有子元素在盒子左侧显示,富裕空间在右侧
end 所有子元素在盒子右侧显示,富裕空间在左侧
center 所有子元素居中
justify 富余空间在子元素之间平均分布
以下案例只展示center和justify,其余请自行尝试

	    <style>
			.box{
				width: 800px;
				height: 600px;
				border: 1px solid #CCCCCC;
				display: -webkit-box;
				-webkit-box-orient: horizontal;
				-webkit-box-pack: center;
			}
			.box div{
				text-align: center;
				width: 100px;
				margin: 10px;
				height: 100px;
				line-height: 100px;
				color: #FFFFFF;
				background: #00A72B;
			}
			
		</style> 

    <style>
			.box{
				width: 800px;
				height: 600px;
				border: 1px solid #CCCCCC;
				display: -webkit-box;
				-webkit-box-orient: horizontal;
				-webkit-box-pack: justify;
			}
			.box div{
				text-align: center;
				width: 100px;
				margin: 10px;
				height: 100px;
				line-height: 100px;
				color: #FFFFFF;
				background: #00A72B;
			}
			
		</style>  

box-align 在垂直方向上对元素的位置进行管理
start 所有子元素在据顶
end 所有子元素在据底
center 所有子元素居中

	    <style>
			.box{
				width: 800px;
				height: 600px;
				border: 1px solid #CCCCCC;
				display: -webkit-box;
				-webkit-box-orient: horizontal;
				-webkit-box-align: center;
			}
			.box div{
				text-align: center;
				width: 100px;
				margin: 10px;
				height: 100px;
				line-height: 100px;
				color: #FFFFFF;
				background: #00A72B;
			}
			
		</style>  


让div盒子水平垂直居中

	<style>
		.box{
			width: 800px;
			height: 600px;
			border: 1px solid #CCCCCC;
			display: -webkit-box;
			-webkit-box-orient: horizontal;
			-webkit-box-align: center;   /*垂直居中*/
			-webkit-box-pack: center;	/*水平居中*/
		}
		.box div{
			text-align: center;
			width: 100px;
			margin: 10px;
			height: 100px;
			line-height: 100px;
			color: #FFFFFF;
			background: #00A72B;
		}
		
	</style>  


以上就是我要讲的弹性盒模型,谢谢大家的阅读!

打赏一个呗

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦