vue表格遍历渲染,flex布局两列对齐应用

1、当我们使用vue的v-for循环遍历数据并渲染成table表格时,业务需求要求遍历成两列,通过flex布局来实现,但是由于每一列的字段长度不一样,所以会存在高度不一样的问题

vue表格遍历渲染,flex布局两列对齐应用

 

 

 

 

 整个容器我们使用flex布局,列1和列2是div标签,div固定宽度为容器宽度的50%,div中的第两个元素为span,但是列1中的数字比较长导致整个撑开了列1和列2所在的行,导致布局看上去不整齐。

vue表格遍历渲染,flex布局两列对齐应用

 

 当我们给div1和div2也添加flex布局时,就可以得到两个列内的span元素填满div的效果

vue表格遍历渲染,flex布局两列对齐应用

 

上一篇:HTML CSS


下一篇:CSS样式_跳动的心脏