PHP学院的中学生 2022-10-20 11:02:15 179次浏览 0条回复 0 0 0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex布局如何让最后一行靠左显示</title>
<style>
.box{
	display: flex; 
	justify-content: space-between; 
	flex-wrap: wrap;
	width:50%;
	border:1px solid;
}
.item{
  color: black;
  flex: 0 0 24%; 
  height: 30px; 
  text-align:center;
  line-height:30px;
  background-color: white;
  /* 边距懒得算,css函数代替 */ 
  margin-right: calc(4% / 3); 
  margin-bottom: calc(4% / 3); 
} 
/* 去除每行尾的多余边距 */
.item:nth-child(4n){ 
  margin-right: 0; 
} 
/* 使最后一个元素的边距填满剩余空间 */
.item:last-child{ 
  margin-right: auto; 
} 

</style>

</head>

<body>
	<div class="box">
		<div class="item" style="background-color: aliceblue;"></div>
		<div class="item" style="background-color: antiquewhite;"></div>
		<div class="item" style="background-color: aqua;"></div>
		<div class="item" style="background-color: black;"></div>
		<div class="item" style="background-color: blueviolet;"></div>
		<div class="item" style="background-color: chartreuse;"></div>
		<div class="item" style="background-color: crimson;"></div>
		<div class="item" style="background-color: crimson;"></div>
		<div class="item" style="background-color: crimson;"></div>
		<div class="item" style="background-color: crimson;"></div>
	</div>    
</body>
</html>
    没有找到数据。
您需要登录后才可以回复。登录 | 立即注册