鹏展博
338字约1分钟
2023-08-09
在 Flex 容器中, 我们可以使用 space-between
来定义项目之间的间距。 当子项的数量 符合我们的 布局预期时,在 UI 效果上来看还不错。 但是,如果 项目的数量过多或过少时,布局就会看起来很糟糕。
请看下面示例:
.wrapper {
display: flex;
justify-content: space-between;
}
justify-content: space-between
项目为 4 个时,看起来还不错。
项目为 3 个时,间隔就过大了。
对此,我们有不同的解决方案:
margin
设置外边距作为间隔gap
设置间隔padding
作为 子元素 间隔比如,我们使用 gap
设置 间隔
.wrapper {
display: flex;
gap: 1rem;
}
gap: 1rem