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 小时前
【Web全栈进阶】Composition API与组件通信:props深入、emit、插槽
前端·css·vue.js
衍辉channel12 小时前
衍辉AI速递 10.14|谷歌发布Gemini 4 Argon模型等9条AI资讯
javascript
vipxieliang12 小时前
JavaScript 事件循环与任务队列:从 setTimeout 到 Promise
前端·javascript
Misnearch13 小时前
React中的回调
前端·javascript·react.js
Eider199815 小时前
大模型输出格式幻觉解决思路
开发语言·前端·javascript
志尊宝15 小时前
Vue3 零基础每日笔记(085):项目上线前 Checklist——环境变量、报错监控、安全自查
前端·javascript·笔记·安全·信息可视化·echarts
志尊宝15 小时前
Vue3 零基础每日笔记(088·完结):从零到一——一个完整 Vue3 项目的成长复盘
前端·javascript·vue.js·笔记·ecmascript·#vue.js
传人once15 小时前
企业官网静态页基础结构如何搭
javascript·css
桔筐15 小时前
Vue中DOM的data-*自定义属性(dataset)与Vue data响应式变量区别详解
前端·javascript·vue.js
damoluomu16 小时前
静态站点生成器怎么选:Node.js 生态里常用的五个(番外一)
javascript·css·typescript·node.js·html