弹性盒模型

Posted carol72

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了弹性盒模型相关的知识,希望对你有一定的参考价值。

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

  

 

 

以上是关于弹性盒模型的主要内容,如果未能解决你的问题,请参考以下文章

弹性盒模型flex

css弹性布局是啥

彻底搞懂flex弹性盒模型布局

CSS3弹性盒模型的布局理解

03 弹性盒模型

弹性盒模型