flex-wrap 是控制 Flex 项目是否换行的属性，默认 nowrap；当表单项多、容器窄时，设为 wrap 才能折行实现响应式布局，并需配合 justify-content 和 flex 设置确保对齐与宽度分配。
flex-wrap 是什么，什么时候必须用它
当表单项数量多、容器宽度有限，又不想让它们强行挤在一行导致溢出或缩小变形时，flex-wrap 就是关键开关。它的默认值是 nowrap，也就是“死活不换行”——这正是多数表单在小屏上错乱的根源。设为 wrap 后，Flex 项目才会根据剩余空间主动折行，这是实现响应式排列的基础动作。
如何用 flex-wrap 配合 justify-content 控制每行对齐
只加 flex-wrap: wrap 不够，容易出现最后一行左对齐、空隙难看的问题。需要搭配 justify-content 调整主轴对齐方式：
-
justify-content: flex-start：每行都靠左（默认，适合紧凑型表单） -
justify-content: space-between：行内项目等距分布，但首尾贴边（注意：仅当该行项目数固定才稳定） -
justify-content: space-evenly：更均匀，但老版 Safari 对它支持弱，生产环境慎用
别忘了给表单项（如 、）设 flex: 1 1 auto 或明确 flex-basis，否则它们可能不按预期分配宽度。
为什么加了 flex-wrap 还是不换行？常见卡点
几个高频原因：
立即学习“前端免费学习笔记（深入）”；
- 父容器没设
display: flex——flex-wrap在非 Flex 容器里完全无效 - 子项设置了
white-space: nowrap或min-width过大，硬扛着不折 - 用了
width: 100%却没配合box-sizing: border-box，padding/border 导致实际宽度超限，挤占换行空间 - 某些 UI 库（如 Ant Design）的表单项自带
display: inline-block或包裹层，需检查真实 DOM 结构再针对性覆盖
一个最小可行示例（带移动端断点）.form-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.form-row > {
flex: 1 1 calc(50% - 6px); / 两列布局，预留 gap 空间 */
}
@media (max-width: 768px) {
.form-row > {
flex: 1 1 100%; / 小屏单列 */
}
}
.form-row > { flex: 1 1 calc(50% - 6px); / 两列布局，预留 gap 空间 */ }
@media (max-width: 768px) { .form-row > { flex: 1 1 100%; / 小屏单列 */ } }
注意：gap 比 margin 更可靠，避免因换行导致的间隙错位；calc() 中减去一半 gap 值，才能让两列真正并排不溢出。如果表单项本身有固定宽高（比如日期选择器），得单独重置它的 flex-basis，不然会破坏整体节奏。
