其原因是把这个高度设定死了，flex布局就会根据这个高度去调整行与行之间的间距，当这个tableData的数据较少的时候，就会使行与行之间的间距变得很大，所以根据这个问题，需要调整这个高度，最简单的方法是使用
max-height(100% - 60px)，
问题就会解决。
最近做项目的时候，使用flex 布局，发现上一行与下一行的间距比较大。具体的代码布局如下所示，<main v-if="tableData.length" class="flex flex-ai-start flex-wrap"> <div v-for="item in tableData" :key="item.id" :ruleData="item" /> <div class="inf
元素里如果有多个行内子元素，子元素
之间
就会存在间隙，解决方法有：
（1）给前面子元素设置浮动：float: left
（2）给父元素设置
flex布局
：display: flex（这个方式最好，能给父元素内所有行内子元素消除间隙，且最稳定）
（3）给后面子元素设置负的偏移：margin-left: -6px（不建议使用）
当数量不足
时
，用不显示的元素补足数量，即可完成不满
时
左对齐
垂直方向设置align-content: flex-start;即可实现换行
时
无
行间距
，之后自行设置样式可控制
行间距
父元素样式
.swiper-item{
display: flex;
align-items: center;
justify-content: space-between;
flex-flow:row wrap;
align-content: flex-start;
<view class="swiper_box"&g
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
&lt;div class="box"&gt;
&lt;div class="item"&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;/div&gt;
传统 pc 端中，子容器高度超出父容器高度，通常使用 overflow:auto 可
出现
滚动条拖动显示溢出的内容，而移动web开发中，由于浏览器厂商的系统不同、版本不同，导致有部分机型不支持对弹性滚动，从而在开发中制造了所谓的 BUG。传统
pc 端中，子容器高度超出父容器高度，通常使用 overflow:auto 可
出现
滚动条拖动显示溢出的内容，而移动web开发中，由于浏览器厂商的系统不同、
1. 使用 justify-content 属性
justify-content 属性可以设置 flex 容器内项目在主轴上的对齐方式。当设置为 flex-start
时
，flex 容器内所有项目都会向左对齐。因此，在最后
一行
项目数量不足一整行
时
，设置 flex 容器的 justify-content 为 flex-start，即可左对齐最后
一行
的项目。
2. 使用 :last-child 伪类
:last-child 伪类可以选中父元素内最后一个子元素。因此，在最后一个列表项目上，可以使用 :last-child 伪类，并设置其 margin-right 为 0，将其与右侧的空白区域合并，使最后
一行
左对齐。
需要注意的是，以上两种方法均需要将 flex 容器的宽度设置为固定值或百分比，以保证列表项目能够正确地占据 flex 容器内的位置。同
时
，使用 :last-child 伪类
时
需注意，最后
一行
的项目可能不是最后一个子元素，因此需要使用其他伪类进行选中。
