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;
}
相关推荐
Hi_kenyon5 小时前
VUE3套用组件库快速开发(以Element Plus为例)二
开发语言·前端·javascript·vue.js
EndingCoder6 小时前
Any、Unknown 和 Void:特殊类型的用法
前端·javascript·typescript
JosieBook6 小时前
【Vue】09 Vue技术——JavaScript 数据代理的实现与应用
前端·javascript·vue.js
华仔啊8 小时前
JavaScript 如何准确判断数据类型?5 种方法深度对比
前端·javascript
程序员小寒9 小时前
从一道前端面试题,谈 JS 对象存储特点和运算符执行顺序
开发语言·前端·javascript·面试
爱健身的小刘同学9 小时前
Vue 3 + Leaflet 地图可视化
前端·javascript·vue.js
神秘的猪头10 小时前
Ajax 数据请求:从零开始掌握异步通信
前端·javascript
黛色正浓10 小时前
leetCode-热题100-贪心合集(JavaScript)
javascript·算法·leetcode
卡尔特斯10 小时前
CSS 特殊符号 / 英文导致换行问题速查表
css
Komorebi゛10 小时前
【CSS】斜角流光样式
前端·css