弹性盒模型

mnblue
mnblue 发布于 2017-01-11 16:12:50 浏览:270 类型:原创 - 随笔 分类:手机移动 - 移动端 二维码: 作者原创 版权保护
1.弹性盒模型
(新版)使用时父级元素需添加 display:flex;
(老版)使用时父级元素需添加 display:-webkit-box;

2.关于主轴
主轴是影响弹性盒模型元素排列的方向 (默认是水平方向,从左往右)
侧轴是与主轴垂直的方向(默认是垂直方向,从上到下)
/*新版弹性盒模型*/
				/*display: flex;*/
				/*设置主轴方向为水平,元素排列为反序*/
				/*flex-direction: row-reverse;*/
				/*设置主轴方向为垂直,元素排列为反序*/
				/*flex-direction: column-reverse;*/
				
/*老版弹性盒模型*/
				display: -webkit-box;
				/*设置主轴方向为水平方向*/
				/*-webkit-box-orient: horizontal;*/
				/*设置主轴方向为垂直方向*/
				/*-webkit-box-orient: vertical;*/
				
				/*元素在主轴上排列为反序*/
				/*-webkit-box-direction: reverse;*/
				/*元素在主轴上排列为正序*/
				/*-webkit-box-direction: normal;*/


3.关于主轴方向富裕空间管理
/*新版弹性盒模型*/
				display: flex;
				/*元素在主轴开始位置 ,富裕空间在主轴的结束位置*/
				/*justify-content: flex-start;*/
				
				/*元素在主轴结束位置,富裕空间在主轴开始位置*/
				/*justify-content: flex-end;*/
				
				/*元素在主轴中间,富裕空间在主轴两侧*/
				/*justify-content: center;*/
				
				/*富裕空间平均分配在每两个元素之间*/
				/*justify-content: space-between;*/
				
				/*富裕空间平均分配在每个元素两侧*/
				/*justify-content: space-around;*/
				
/*老版弹性盒模型*/
				display: -webkit-box;
				/*元素在主轴的开始位置,富裕空间在主轴的结束位置*/
				/*-webkit-box-pack: start;*/
				
				/*元素在主轴结束位置,富裕空间在主轴开始位置*/
				/*-webkit-box-pack: end;*/
				
				/*元素在主轴中间,富裕空间在主轴两侧*/
				/*-webkit-box-pack: center;*/
				
				/*富裕空间平均分配在每两个元素之间*/
				/*-webkit-box-pack: justify;*/


4.关于侧轴方向富裕空间管理

		border: 1px solid #000;
				/*新版弹性盒模型*/
				/*display: flex;*/
				/*元素在侧轴开始位置,富裕空间在侧轴结束位置*/
				/*align-items: flex-start;*/
				
				/*元素在侧轴结束位置,富裕空间在侧轴开始位置*/
				/*align-items: flex-end;*/
				
				/*元素在侧轴中间位置,富裕空间在侧轴两侧*/
				/*align-items: center;*/
				
				/*根据侧轴方向上文字的基线对齐*/
				/*align-items: baseline;*/
				
				
/*老版弹性盒模型*/
				/*display: -webkit-box;*/
				/*元素在侧轴开始位置,富裕空间在侧轴结束位置*/
				/*-webkit-box-align: start;*/
				
				/*元素在侧轴结束位置,富裕空间在侧轴开始位置*/
				/*-webkit-box-align: end;*/
				
				/*元素在侧轴中间位置,富裕空间在侧轴两侧*/
				/*-webkit-box-align: center;*/


注意:以上关于主轴、侧轴以及富裕空间的属性,都是添加在父级

5.定义盒子的弹性空间
新版:flex-grow:1;
老版:-webkit-box-flex:1;
添加在子级

子元素的尺寸=盒子的尺寸*子元素的box-flex属性值/ 所有子元素的box-flex属性值的和
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
				margin: 0;
			}
			#box{
				height: 300px;
				border: 1px solid #000;
				/*新版弹性盒模型*/
				/*display: flex;*/
				
				
				/*老版弹性盒模型*/
				display: -webkit-box;

			}
			#box div{
				/*新版*/
				/*flex-grow: 1;*/
				
				/*老版*/
				-webkit-box-flex:1;

				
				width: 50px;
				height: 50px;
				background-color: #f00;
				font-size: 30px;
				color: #fff;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
		</div>
	</body>
</html>



5.元素具体位置设置
添加在子级
新版:order:1;                
老版:-webkit-box-ordinal-group:1;                         
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
				margin: 0;
			}
			#box{
				height: 300px;
				border: 1px solid #000;
				/*新版弹性盒模型*/
				/*display: flex;*/
				
				/*老版弹性盒模型*/
				display: -webkit-box;
				
			}
			#box div{
				width: 50px;
				height: 50px;
				background-color: #f00;
				font-size: 30px;
				color: #fff;
			}
			
			#box div:nth-of-type(1){
				/* 数值越小越靠前,可以接受0 或者负值 */
				/*order:5;*/
				
				/* 数值越小越靠前, 最小值默认处理为1*/
				-webkit-box-ordinal-group:-2;
			}
			#box div:nth-of-type(2){
				/*order:2;*/
				-webkit-box-ordinal-group:1;
			}
			#box div:nth-of-type(3){
				/*order:3;*/
				-webkit-box-ordinal-group:0;
			}
			#box div:nth-of-type(4){
				/*order:-1;*/
				-webkit-box-ordinal-group:4;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
		</div>
	</body>
</html>
标签:
z
给个赞 0 人点赞
收藏 1 人收藏
评论 已有 0 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
还没有任何评论呢,赶紧抢先来一发吧!
mnblue mnblue 作者

作者最新