flex布局，居中+最后一行左对齐，适用于justify-content: center/space-between/space-around

har01d

已于 2023-11-18 09:47:15 修改

阅读量1.5k

点赞数 1

文章标签： css css3 html

于 2022-11-25 11:48:41 首次发布

本文链接：https://blog.csdn.net/weixin_43951592/article/details/128035309

版权

<div class="aaa">
    <div v-for="(item,index) in Arr" class="bbb">
     </div>
 </div>

.aaa{
	display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}
.bbb{
	width: 50px;
	height: 30px;
	background: red;
}

效果如下：
在这里插入图片描述

网上看了很多方法，:after伪元素flex：1，或者transform: translate，发现都是坑爹的

最终的完美解决方法：

<div class="aaa">
    <div v-for="(item,index) in Arr" class="bbb">
     </div>
     <i v-for="item in 50" :key="item"></i>
 </div>

.aaa {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

}

.aaa i {
    width: 50px;
    margin: 10px;
}

.bbb {
    width: 50px;
    height: 30px;
    margin: 10px;
    background: red;
}