flex布局产生的间隙解决方法

最新推荐文章于 2026-05-01 05:48:49 发布

原创最新推荐文章于 2026-05-01 05:48:49 发布 · 2w 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

本文介绍在使用Flex布局时，默认间隙的出现及如何通过调整align-content属性来解决这一问题，包括flex-start、flex-end、center、stretch、space-between和space-around等不同取值的具体应用。

flex布局的元素会有默认间隙，解决方法

align-content: flex-start

具体参数如下：

取值情况：
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
stretch（默认值）：轴线占满整个交叉轴。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。