flex布局，ref数据驱动渲染，1行数显示2个，自动换行，可以设置默写元素一行显示一个

最新推荐文章于 2026-06-20 16:03:27 发布

原创

最新推荐文章于 2026-06-20 16:03:27 发布 · 592 阅读

标签

#javascript #前端 #vue.js

收录于

.m-text.up{display: flex; color: #E62600;align-items: center;}
.m-text.down{display: flex; color: #24B353;align-items: center;}
.m-up{margin: 0 0 0 5px;display: inline-block; width: 4px;height: 16px;background-image: url(../../../../../../assets/images/home/m-up.png);background-size: 100% 100%;}
.m-down{margin: 0 0 0 8px;display: inline-block; width: 4px;height: 16px;background-image: url(../../../../../../assets/images/home/m-down.png);background-size: 100% 100%;}
.m-header-right-text{font-family: PingFangSC, PingFang SC;font-weight: 400;font-size: 14px;color: #666666;}

.m-box-wrap{display: flex;  flex-wrap: wrap;padding: 5px 0px;}
.m-box-item{ flex: 0 0 50%;}
.m-box-item.span2{flex: 0 0 100%}
.m-box-item-inner{position: relative; display: flex;align-items: center; justify-content: center;height: 100px;margin: 0 5p