css 弹性盒子space-between两端对齐，最后一列数量不够时，最后一列左对齐。
代码：<!DOCTYPE html><html><head><title>测试</title><style>.container{width: 200px;height:200px;border:2px solid red;}.box {display: flex;fle
·
代码：
<!DOCTYPE html>
<html>
<head>
<title>测试</title>
<style>
.container{
width: 200px;
height:200px;
border:2px solid red;
}
.box {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.box>div {
margin-bottom: 10px;
width: 30%;
height: 60px;
background-color: #aaa;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</div>
</body>
</html>效果：
解决：
在容器内新增一个空元素“<div></div>”。
如果容器内的元素个数是可变的，那么就要判断元素个数能否被列数整除，不能被整除那么就添加它余数个数的空元素“<div></div>”。
vue部分代码：
<div if="list.lenght%3==1">
<div></div>
</div>
<div if="list.lenght%3==2">
<div></div>
</div>list为数组
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
0
0- 0
已为社区贡献42条内容
所有评论(0)