flex-wrap 是控制 Flex 项目是否换行的属性，默认 nowrap；当表单项多、容器窄时，设为 wrap 才能折行实现响应式布局，并需配合 justify-content 和 flex 设置确保对齐与宽度分配。
flex-wrap 是什么，什么时候必须用它
当表单项数量多、容器宽度有限，又不想让它们强行挤在一行导致溢出或缩小变形时，
就是关键开关。它的默认值是
，也就是“死活不换行”——这正是多数表单在小屏上错乱的根源。设为
后，Flex 项目才会根据剩余空间主动折行，这是实现响应式
排列
的基础动作。
如何用 flex-wrap 配合 justify-content 控制每行对齐
只加
不够，容易出现最后一行左对齐、空隙难看的问题。需要搭配
调整主轴对齐方式：
：每行都靠左（默认，适合紧凑型表单）
：行内项目等距分布，但首尾贴边（注意：仅当该行项目数固定才稳定）
：更均匀，但老版 Safari 对它支持弱，生产环境慎用
别忘了给表单项（如
、
）设
或明确
，否则它们可能不按预期分配宽度。
为什么加了 flex-wrap 还是不换行？常见卡点
几个高频原因：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
父容器没设
——
在非 Flex 容器里完全无效
子项设置了
或
过大，硬扛着不折
用了
却没配合
，padding/border 导致实际宽度超限，挤占换行空间
某些 UI 库（如 Ant Design）的表单项自带
或包裹层，需检查真实 DOM 结构再针对性覆盖
一个最小可行示例（带移动端断点）
注意：
比
更可靠，避免因换行导致的间隙错位；
中减去一半
值，才能让两列真正并排不溢出。如果表单项本身有固定宽高（比如日期选择器），得单独重置它的
，不然会破坏整体节奏。
flex-wrapnowrapwrapflex-wrap: wrapjustify-contentjustify-content: flex-startjustify-content: space-betweenjustify-content: space-evenlyflex: 1 1 autoflex-basisdisplay: flexflex-wrapwhite-space: nowrapmin-widthwidth: 100%box-sizing: border-boxdisplay: inline-block.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%; / 小屏单列 */
}
}
gapmargincalc()gapflex-basis