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;
}
相关推荐
tedcloud12336 分钟前
RTK部署教程:构建稳定的AI Workflow环境
服务器·javascript·人工智能·typescript·ocr
ZC跨境爬虫1 小时前
跟着 MDN 学CSS day_16:(深入掌握背景与边框的艺术)
前端·css·ui·html·tensorflow
zithern_juejin6 小时前
new 运算符
javascript
前端毕业班6 小时前
uniapp web 灵活控制 style scoped
前端·javascript·vue.js
张元清7 小时前
在 React 里写动画又不跟渲染周期较劲:useRafFn、useRafState、useFps、useDevicePixelRatio、useUpdate
前端·javascript·面试
甜味弥漫9 小时前
JavaScript 底层逻辑:从内存视角看原型与原型链
前端·javascript
咪饭只吃一小碗9 小时前
JS this 身世大揭秘:它到底该听谁的?
前端·javascript
周淳APP9 小时前
【前端八股第一弹】
开发语言·前端·javascript·react.js
SmartBoyW9 小时前
撕掉前端黑魔法外衣:用 C++/Java 指针思维硬核拆解 JS 原型链
前端·javascript
不好听6139 小时前
数组去重的六种解法
javascript