多根轴线的对齐方式 order值排序

时间：5年前阅读：4802

1、order次序默认值是0，这里order:6 值是6最大的所以排后面

<!DOCTYPE html>    
<html lang="en">    
<head>    
	<meta charset="UTF-8">    
	<title>Document</title>    
	<style typ="text/css">    
	#jbrt{    
		width: 1200px;    
			height: 400px;    
			border: 2px solid blue;    
			margin: 50px auto;    
			display: flex;    
			flex-wrap: wrap;    
			/*flex-wrap: wrap-reverse;*/    
			/*flex-start与交叉轴的起点对齐*/    
			/*align-content: flex-start;*/    
			/*flex-end,与交叉轴的终点对齐，  center 与交叉轴的中点对齐*/    
			/*space-between 与交叉轴的两端对齐，轴线之间的间隔平均分布*/    
/*space-around 每根轴线两侧的间隔都相等。所以轴线之间的间隔比轴线与边框的间隔大一倍*/    
/*stretch(默认值)轴线占满整个交叉轴*/    
align-content: space-between;    
	}    
	#jbrt>div{    
		width: 300px;    
		height: 190px;    
		background: blueviolet;    
		font-size: 30px;    
		text-align: center;    
		outline: 1px solid blue;    
		/*flex: 1;*/    
	}    
	#jbrt>div:nth-child(3){    
		/*要想加二，就要上面也要加才行  比列*/    
		/*flex: 2;*/    
	}    
	</style>    
</head>    
<body>    
	<div id="jbrt">    
<div>1</div>    
	<div>2</div>    
	<div style="order:2;">3</div>     
	<div style="order:6;">4</div>    
	<div>5</div>    
	<div>6</div>    
	<div>7</div>    
	<div>8</div>    
	</div>    
</body>    
</html>

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

微信扫码关注

更新实时通知

多根轴线的对齐方式 order值排序

网友评论