css 边距问题?

Question

这是一个底部导航的测试页面

在外层的 .box 带了一个上下的内边距

在内部用的是 row-col 布局

里面的列表只有一个row, 且自动换行
所以需要保持上下空间, 需要给每个col设置 margin-bottom
但是这样排版就会有问题, 整个容器下面空间就会显得特别大

有没有什么办法能把能灵活的把底部的那段间距去除掉?

补充: row-col 后面还需要做小屏适配, 可能在小屏上一行只显示一栏. 也就是说不管是pc还是手机端(不管一行显示多少个), 都需要去除最后一行的margin-bottom

Answer 1

不要在 col 上设置 margin-bottom，试试在 box 上设置 row-gap

.box {
    display: flex;
    flex-wrap: wrap;
    row-gap: 10px;
}

Answer 2

一种方式使用 gap in flex 的方式，具体可以借鉴我的这篇笔记 在 Flex 布局中使用 gap 属性，但是会面兼容性问题。
所以我后来又提了一个相关的问题 弹性布局(flex布局)中使用gap的兼容性问题应该如何解决？。

另外最好提供一下你使用的UI库，或者说是否是使用的 TailwindCSS 之类的原子类库

Answer 3

感觉可以用外边距重叠的特性试一下