flex 布局一行显示四个最后一行处理方案 [ 新手入门 ]

PHP学院的中学生 2022-10-20 11:02:15 813次浏览 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>

共 0 条回复

默认排序
    没有找到数据。

回复话题

您需要登录后才可以回复。登录 | 立即注册
PHP学院的中学生
副总裁

PHP学院的中学生

注册时间：2018-10-23
最后登录：2024-04-07
在线时长：168小时1分
  • 粉丝29
  • 金钱4730
  • 威望30
  • 积分6710
私信

热门话题