flex布局空白过大主因是误用justify-content: space-around/between；推荐用gap属性精确控制项目间间距，或改用justify-content: flex-start配合margin，辅以检查padding、width及内容默认样式。
flex布局中空白间距太大，通常是因为误用了 justify-content: space-around 或 space-between，尤其在子项数量少、容器宽大时，视觉上会显得空荡。不用 space-around 也能实现均匀又克制的间距，关键是选对对齐方式 + 精确控制间隙。
用 gap 替代 justify-content 的“自动分摊”
gap 是最直接、可控的间距方案，它只在 flex 项目之间添加固定间隙，不拉伸首尾留白。只要父容器是 display: flex，且浏览器支持（现代主流浏览器均支持），就能用：
- 设置
gap: 12px（或gap: 1rem），所有相邻项目间统一留白 - 支持分别设置：
row-gap: 8px; column-gap: 16px - 比
space-around更稳定——项目增减、宽度变化时，间距始终一致
改用 justify-content: flex-start + 手动外边距
当需要更灵活的控制（比如首项靠左、末项靠右、中间等距），可关闭自动分布，用 margin 显式管理：
- 父容器设
justify-content: flex-start（默认值，取消撑满） - 给除第一个子项外的所有项目加
margin-left: 16px - 或用
:not(:first-child) { margin-left: 16px; }一行搞定
检查是否误加了 padding 或 width 过大
有时“空白太大”并非来自 flex 对齐，而是布局干扰：
立即学习“前端免费学习笔记（深入）”；
- 父容器本身有大
padding，看起来像内部间距过大 - 子项设置了
flex: 1又没限制最大宽度，导致被强行撑开 - 图片或文字内容本身带默认
margin/line-height，叠加后放大空白感
用 justify-content: center 配合 max-width 收敛布局
如果目标是居中且避免两端大片留白，不要依赖 space-around，而是：
- 父容器设
justify-content: center - 给子项整体包一层内联容器（如 ），设
max-width: 960px限制总宽度- 再配合
gap控制内部间距，视觉紧凑又居中 - 再配合