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;
}
相关推荐
非优秀程序员3 小时前
第07章 孙德良的阳谋|《互联网产品恩仇录》
javascript·后端
程序员大阳7 小时前
HTML+CSS+JS对话式实战(5)-活动管理页之查看报名名单的实现
javascript·css·html·查看报名名单
曦樂~8 小时前
【Web Development】02 CSS
前端·css
东鹏特饮8 小时前
经典打砖块(Breakout)游戏
前端·css·css3
新*10 小时前
从一段 WebSocket 代码聊开:bytes 不是 zlib、binaryType 决定一切,15MB 大消息的零拷贝优化
javascript·python·websocket·性能优化·blob·zlib·arraybuffer
OpsEye11 小时前
别再挨个充会员了:多模型编码,最麻烦的从来不是选模型
javascript·ai编程
学以智用12 小时前
jsencrypt.js 完整详解
javascript
Hilaku15 小时前
你们公司有 35 岁以上的前端吗?
前端·javascript·程序员
鸿蒙开发15 小时前
小程序存档写到一半怎么办?双槽保存与损坏恢复实战
前端·javascript·react.js
知忆_IS16 小时前
TerriaMap 开发实战04:MVT数据自定义符号化 - terriajs源码修改
javascript·webgis·terriamap·terriajs