css3对文字标签不同宽,不同高使用瀑布流对齐显示

bash 复制代码
<div class="wrapper" style="padding: 0;">
 <span class="wf-item task-tags text-center" v-for="(item,index) in data.categorys" :key="index">{{ item }}</span>
</div>

/* 名称瀑布流显示 */
.wrapper {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    padding: 15px 5px;
}
.wrapper::after {
    content: "";
    flex-grow: 99999;
}
.wf-item {
    flex-grow: 1;
    position: relative;
    overflow: hidden;
    padding: 10px;
    border: 1px solid #e7e7e7;
}
相关推荐
暗不需求11 分钟前
JavaScript 面向对象探秘:从构造函数到原型链的优雅继承
前端·javascript
圣光SG14 分钟前
奶茶店网页(纯HTML和CSS)
前端·css·html
kyriewen15 分钟前
你还在给每个图片父元素加类名?CSS :has() 让选择器“逆天改命”
前端·css·面试
zfyljx44 分钟前
Taro+react input框在文字中间插入光标会跳到末尾问题
javascript·react.js·taro
Lana学习中1 小时前
[AI编程]纯前端JS实现评论区自动截图&生成 PDF
前端·javascript·pdf·vibe coding
~无忧花开~1 小时前
React事件处理全解析
开发语言·前端·javascript·react.js·前端框架
英俊潇洒美少年1 小时前
豆包官方开放 API 调用指南(合法稳定版)
前端·javascript
漠月瑾-西安1 小时前
JavaScript 字符串处理技巧:substring 与 indexOf 的灵活组合
javascript·前端开发·indexof·代码优化·substring·字符串处理
海上彼尚1 小时前
Nuxt4 官网访问来源统计的实现
开发语言·前端·javascript
三*一1 小时前
mapbox 基于 Turf.js 实现高精度多边形分割(支持带空洞 / 坐标无损)
开发语言·前端·javascript·vue.js·mapbox gl