表单控件用 display: flex 水平排列无效，主因是父容器缺宽度、子元素默认样式撑开换行；需设 align-items: center、box-sizing: border-box、清除 margin、用 flex: 1 和 gap 控制布局，并兼顾 IE 兼容与响应式处理。
表单控件用 display: flex 水平排列时，为什么没效果？
常见原因是父容器没设宽度、或子元素（如 、）被默认样式撑开换行。Flex 布局本身不自动压缩子项，尤其表单控件默认 width: auto 且可能继承外边距/内边距。
- 确保父容器有明确的
display: flex，且未被flex-wrap: wrap（默认值是nowrap，但有时被重置） - 给子控件加
flex: 1或flex: 0 0 auto控制伸缩行为 - 移除或重置表单控件的
margin（比如 Chrome 对有默认margin: 0.25em 0）
怎么让多个
关键不是单纯设 flex，而是统一基线对齐、消除间隙、控制尺寸比例。表单控件的 box-sizing 默认是 content-box，容易导致宽度计算出错。
- 父容器设
display: flex; align-items: center;对齐文字基线 - 所有子控件统一
box-sizing: border-box; - 用
flex: 1让输入框占剩余空间，按钮用flex: 0 0 auto固定宽 - 显式清除
margin，比如margin: 0;或margin-right: 0.5rem;（最后一个除外）
.form-row {
display: flex;
align-items: center;
gap: 0.5rem; /* 推荐用 gap 替代 margin，更可控 */
}
.form-row > * {
box-sizing: border-box;
margin: 0;
}
.form-row input[type="text"] {
flex: 1;
}
.form-row button {
flex: 0 0 auto;
}
gap 和 margin 在表单中哪个更可靠？
gap 是 Flex/Grid 原生属性，不会触发 margin 合并，也不受 display: inline 类控件影响，对表单布局更干净。但 IE 不支持，若需兼容 IE，得回退到 margin + :not(:last-child)。
- 现代项目优先用
gap：简洁、无副作用、响应式友好 - 如果必须兼容 IE11，改用
margin-right并配合:not(:last-child)清除末尾间距 - 注意
gap对visibility: hidden的元素仍生效，而margin不会——这点在动态显示/隐藏控件时有差异
移动端小屏幕下水平排列撑出滚动条怎么办？
Flex 默认不换行（flex-wrap: nowrap），一旦总宽度超容器，就会溢出。表单控件本身没有响应式收缩逻辑，必须手动干预。
立即学习“前端免费学习笔记（深入）”；
- 给父容器加
flex-wrap: wrap;，允许折行（但会破坏“一行”需求） - 更稳妥的是用
min-width: 0配合flex: 1，强制内容可压缩（尤其对内文本） - 对固定宽控件（如按钮），用
min-width: fit-content或媒体查询降级为width: 100% - 测试真机，因为部分 Android 浏览器对
flex-basis: 0处理异常
.form-row {
display: flex;
flex-wrap: wrap; /* 兜底换行 */
gap: 0.5rem;
}
.form-row input {
flex: 1 1 0; /* 关键：flex-basis 设为 0，让宽度从剩余空间均分 */
min-width: 0; /* 防止内容撑开 */
}实际写的时候，别只盯着 display: flex 这一行；表单控件的默认样式、盒模型、基线对齐、响应式断点，每个都可能悄悄破坏你想要的一行效果。
