order flex属性 CSS3弹性盒模型布局

时间：5年前阅读：5278

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列、对齐和分配空白空间。即便容器中条目的尺寸未知或是动态变化的，弹性盒布局模型也能正常的工作。在该布局模型中，容器会根据布局的需要，调整其中包含的条目的尺寸和顺序来最好地填充所有可用的空间。当容器的尺寸由于屏幕大小或窗口尺寸发生变化时，其中包含的条目也会被动态地调整。比如当容器尺寸变大时，其中包含的条目会被拉伸以占满多余的空白空间；当容器尺寸变小时，条目会被缩小以防止超出容器的范围。弹性盒布局是与方向无关的。

直接上代码：

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title></title>    
		<style type="text/css">    
			*{    
				padding: 0;    
				margin: 0;    
			}    
			ul{    
				margin: 0 auto;    
				width: 1100px;    
				height: 300px;    
				border: 2px solid darkblue;    
				/*将外层容器转换成弹性盒模型*/    
				display: flex;    
				/*flex-direction: row;*/    
				/*justify-content: space-around; 均分*/    
				justify-content: space-between; /* 挨着左右两端均分*/    
				align-items: center;   /*居中对齐弹性盒*/    
				flex-wrap: wrap;  /*换行*/    
				align-content: space-around;  /*多根轴线中间平分*/    
			}    
			ul li{    
				width: 200px;    
				height: 100px;    
				border: 1px solid darkgreen;    
				background: darkgreen;    
				/*margin: 10px;*/    
				border: 2px solid palevioletred;    
				list-style: none;    
				text-align: center;    
				line-height: 100px;    
				color: white;    
				font-size: 30px;    
				flex: 1;  /*flex: 1 表示只占一份*/    
			}    
		</style>    
	</head>    
	<body>    
		<!--弹性盒模型容器中的项目默认在主轴上排列    
			子元素默认都排列在主轴上，不换行    
		如果项目总宽度小于容器宽度，就正常排列，按照设置的宽度    
		如果项目总宽度大于容器宽度，那么子元素就均分容器宽度，设置宽度无效-->    
		<ul>    
			<li>1</li>    
			<li>2</li>    
			<li style="order: 2;">3</li>   <!--数值越小排在前面，数值大的排后面-->    
			<li>4</li>    
			<li>5</li>    
			<li>6</li>    
			<li>7</li>    
			<li>8</li>    
			<li style="flex: 3;">9</li>  <!--flex: 3 占3份大小-->    
			<li>10</li>    
		</ul>    
	</body>    
</html>

上面代码的效果图:

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

order flex属性 CSS3弹性盒模型布局

网友评论