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;
}
相关推荐
LeeAt2 分钟前
真的!真的就一句话就能明白this指向问题
前端·javascript
Winwin44 分钟前
js基础-数据类型
javascript
Winwin1 小时前
哈?Boolean能作为回调函数?
javascript
Shartin1 小时前
CPT208-Human-Centric Computing: Prototype Design Optimization原型设计优化
开发语言·javascript·原型模式
独立开阀者_FwtCoder1 小时前
你用 Cursor 写公司的代码安全吗?
前端·javascript·github
dme.1 小时前
Javascript之DOM操作
开发语言·javascript·爬虫·python·ecmascript
摸鱼仙人~1 小时前
React Ref 指南:原理、实现与实践
前端·javascript·react.js
teeeeeeemo1 小时前
回调函数 vs Promise vs async/await区别
开发语言·前端·javascript·笔记
每天开心1 小时前
深入理解 CSS 选择器:从基础到高级
css·html·ai编程
zhanshuo2 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos