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;
}
相关推荐
儒雅的烤地瓜几秒前
JS | JS中判断数组的6种方法,你知道几个?
javascript·instanceof·判断数组·数组方法·isarray·isprototypeof
道爷我悟了2 分钟前
Vue入门-指令学习-v-on
javascript·vue.js·学习
27669582925 分钟前
京东e卡滑块 分析
java·javascript·python·node.js·go·滑块·京东
PleaSure乐事19 分钟前
【Node.js】内置模块FileSystem的保姆级入门讲解
javascript·node.js·es6·filesystem
雷特IT30 分钟前
Uncaught TypeError: 0 is not a function的解决方法
前端·javascript
awonw1 小时前
[前端][easyui]easyui select 默认值
前端·javascript·easyui
老齐谈电商1 小时前
Electron桌面应用打包现有的vue项目
javascript·vue.js·electron
柏箱2 小时前
使用JavaScript写一个网页端的四则运算器
前端·javascript·css
一颗花生米。5 小时前
深入理解JavaScript 的原型继承
java·开发语言·javascript·原型模式
学习使我快乐015 小时前
JS进阶 3——深入面向对象、原型
开发语言·前端·javascript