使用flex-wrap和gap可解决子元素换行对齐问题。设置display: flex配合flex-wrap: wrap允许子元素换行，gap统一行列间距避免margin导致的错位，再通过flex: 0 0 200px等合理宽度控制子项尺寸，结合box-sizing: border-box确保布局稳定，最终实现多行整齐排列的响应式布局效果。
子元素换行后排列不整齐，通常是因为容器空间不足导致子项在换行时对齐混乱。使用 Flexbox 的 flex-wrap 和 gap 能有效解决这个问题，让多行子元素整齐排列。
启用 flex-wrap 换行支持
默认情况下，Flex 容器中的子元素不会换行。要让它们在空间不足时自动换到下一行，需要设置：
.container {
display: flex;
flex-wrap: wrap; /* 允许换行 */
}
flex-wrap: wrap 表示子元素从左到右排列，超出容器宽度时自动换行。也可以用 wrap-reverse 反向换行，但一般用不到。
使用 gap 统一间距
传统方法用 margin 控制间距，但在换行场景下容易造成边缘不对齐或空白断层。使用 gap 可以在子元素之间统一添加间隙，且不会影响首尾元素的布局：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
flex-wrap: wrap;
gap: 16px; /* 行与列之间的间距 */
}
gap 同时设置行间距和列间距。如果需要分别控制，可以写成：
gap: 16px 8px; /* 纵向间距 16px，横向间距 8px */
确保子元素宽度合理
即使启用了 flex-wrap 和 gap，如果子元素宽度设置不当，依然可能排列错乱。建议为子元素设置固定的或相对的宽度，例如：
- 固定宽度：
width: 200px; - 百分比宽度：
width: calc(33.33% - 16px);（配合 gap 使用） - 弹性宽度：
flex: 0 0 200px;（不伸缩，最小宽度 200px）
结合 box-sizing: border-box，避免 padding 和 border 导致实际宽度溢出。
完整示例
.container {
display: flex;
flex-wrap: wrap;
gap: 16px;
padding: 16px;
}
<p>.item {
flex: 0 0 200px;
height: 100px;
background: #007acc;
color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
box-sizing: border-box;
}</p>这样无论屏幕宽窄，子元素都会整齐地按行排列，换行时对齐一致，视觉效果整洁。
基本上就这些。flex-wrap 解决换行问题，gap 解决间距混乱，再配合合理的宽度设置，就能实现稳定整齐的多行布局。不复杂但容易忽略细节。
