彈性佈局怎樣排兩行

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	  .row {    
	  	width: 300px;    
	  	display: flex;    
	  	flex-wrap: wrap;    
	  	align-content: center;
	  }  
	  .col{    
	  	flex: 0 25%;    //根據實際情況而定
	  	height: 80px;    
	  	box-sizing: border-box;    
	  	border: 1px solid #dcdfe6;
	  }
	</style>
</head>
<body>
	<div class="row">
	  	<div class="col">1</div>
	  	<div class="col">2</div>
	  	<div class="col">3</div>
	  	<div class="col">4</div>
  		<div class="col">5</div>
  		<div class="col">6</div>
  		<div class="col">7</div>
  		<div class="col">8</div>
  	</div>
</body>
</html>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章