css flex布局 justify-content: space-between 最后两张居左

比如如果是8张,最后两张两边对齐,第八张最后一张 放个占位符就OK了

<div class="previewPadding flex" >

<div class="picList picList3" v-for="(item,index) in picDataList" :key="index">

<img class="pic" :src="item.pic" />

</div>

<div v-if="picDataList.length == 8" class="picList picList3" ></div>

</div>

.flex{

display: flex;

justify-content: space-between;

flex-wrap: wrap;

.picList{

width:49%;

}

.picList3{

width:32%;

//margin-right: 3%;

}

}

相关推荐
y***548818 小时前
React依赖
前端·react.js·前端框架
2***B44918 小时前
React测试
前端·react.js·前端框架
A3608_(韦煜粮)18 小时前
深入理解React Hooks设计哲学与实现原理:从闭包陷阱到并发模式
javascript·性能优化·react·前端开发·react hooks·并发模式·自定义hooks
5***o50018 小时前
React自动化测试
前端·react.js·前端框架
T***u33318 小时前
React部署
前端·react.js·前端框架
Jing_Rainbow18 小时前
【AI-7 全栈-2 /Lesson16(2025-11-01)】构建一个基于 AIGC 的 Logo 生成 Bot:从前端到后端的完整技术指南 🎨
前端·人工智能·后端
玉宇夕落18 小时前
🔁 字符串反转 × 两数之和:前端面试高频题深度拆解(附5种反转写法 + 哈希优化)
javascript
神秘的猪头18 小时前
🧱 深入理解栈(Stack):原理、实现与实战应用
前端·javascript·面试
用户29654127591718 小时前
JSAPIThree UI 控件学习笔记:用内置控件提升交互
前端
明教教主张5G18 小时前
Vue响应式原理(13)-ref实现原理解析
前端·vue.js