如何固定flex-wrap换行后的行间距？父容器为固定高度

核心解决思路是调整父容器的align-content属性——默认的stretch值会强制flex行拉伸填充容器剩余垂直空间，这就是换行后所有行重新偏移的根源。

修改后的父容器CSS： #

display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 500px;
height: 300px;
align-content: flex-start; /* 关键：让行从顶部开始排列，不拉伸填充剩余空间 */
gap: 20px; /* 固定行间距，可按需调整数值 */

原理说明： #

• 设置align-content: flex-start后，所有flex行只会沿容器顶部对齐，各行仅占据自身高度加上gap的空间，容器剩余的垂直空间会留在底部，不会被分配给各行。
• 新增子元素触发换行时，新行只会在已有行的下方追加，不会触发所有行重新分配空间，自然不会出现偏移。

如果不想用gap，也可以给子元素设置margin-bottom: 20px;来控制行间距，效果完全一致。

内容的提问来源于stack exchange，提问作者Luke Sawczak