天天看點

vue表格周遊渲染,flex布局兩列對齊應用

1、當我們使用vue的v-for循環周遊資料并渲染成table表格時,業務需求要求周遊成兩列,通過flex布局來實作,但是由于每一列的字段長度不一樣,是以會存在高度不一樣的問題

 整個容器我們使用flex布局,列1和列2是div标簽,div固定寬度為容器寬度的50%,div中的第兩個元素為span,但是列1中的數字比較長導緻整個撐開了列1和列2所在的行,導緻布局看上去不整齊。

 當我們給div1和div2也添加flex布局時,就可以得到兩個列内的span元素填滿div的效果:但前提是不要給span标簽設定高度