flex布局space-between,最后一行左对齐
Posted 北方的刀郎
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了flex布局space-between,最后一行左对齐相关的知识,希望对你有一定的参考价值。
一般是这样效果,不是想要的。
方法一、添加几个空item
根据布局列数添加空item,比如每行最大n列,那么在最后添加n个空item即可
放 n-2 个也可以。可以省两个(空的可以把其他挤过来。但是高度wei)
<html>
<style>
.item {
width: 32%;
height: 60px;
margin-top: 10px;
}
.itemempty {
height: 0px;
width: 32%;
}
.box {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
</style>
<body>
<div class="box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="itemempty"></div>
<div class="itemempty"></div>
<div class="itemempty"></div>
</div>
</body>
</html>
以上是关于flex布局space-between,最后一行左对齐的主要内容,如果未能解决你的问题,请参考以下文章