flex 布局一行显示四个最后一行处理方案 [ 新手入门 ]
<!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学院的中学生
注册时间：2018-10-23
最后登录：2024-09-23
在线时长：168小时13分
最后登录：2024-09-23
在线时长：168小时13分
- 粉丝29
- 金钱4725
- 威望30
- 积分6705