如何用CSS flex wrap实现表单元素在不同屏幕尺寸下自适应换行排列？

本文共计697个文字，预计阅读时间需要3分钟。

当表单项数量多、容器宽度有限，又不想让它们强行挤在一行导致溢出或缩小变形时，使用 `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 对它支持弱，生产环境慎用

别忘了给表单项（如 <input>、<select>）设 flex: 1 1 auto 或明确 flex-basis，否则它们可能不按预期分配宽度。