输入框不缩放是因为默认 min-width: auto 覆盖 flex 伸缩，必须设 min-width: 0；按钮需 flex-shrink: 0；textarea 与按钮高度不齐应调父容器 align-items: center 并设 textarea align-self: flex-start；移动端键盘导致 100vh 失真，改用 100% + html/body height: 100%；回车失效多因按钮缺 type="submit"。
为什么直接写 display: flex 后输入框不缩放？
因为 <input> 默认有 min-width: auto，它会强制撑开到内容宽度（比如 placeholder 文字或用户输入），哪怕父容器设了 flex: 1，这个行为也会覆盖伸缩逻辑。不加干预，按钮会被挤出视口或输入框卡死在固定宽度。
必须显式重置：min-width: 0 是硬性前提，不是可选项。同时避免混用 width: 100% 和 flex，尤其在嵌套 flex 容器里，它们会冲突导致布局失效。
-
input上设flex: 1; min-width: 0; - 按钮加
flex-shrink: 0，防止被压缩变形（尤其带图标时） - 若按钮含 SVG 或字体图标，确保其
height与line-height对齐，否则垂直偏移
textarea 和发送按钮并排时高度对不齐？
这是 Flex 默认 align-items: stretch 导致的：textarea 被拉满父容器高度，而按钮只按自身内容撑高。别去调 textarea 的 height —— 它是替换元素，height: 100% 在 flex 里常失效或压扁。
正确做法是控制父级容器：
- 父容器设
display: flex; align-items: center; -
textarea加align-self: flex-start;（让它按内容高度自适应） - 同时配
min-height: 80px; resize: vertical; overflow: auto;，避免滚动条遮挡光标 - 按钮保持默认
align-self: auto，自然居中
移动端键盘弹出后输入框突然变窄或消失？
这不是 CSS 写错了，而是 100vh 在 iOS/Android 键盘弹出时会失真：浏览器把视口高度重算为“可见区域”，导致 flex 剩余空间误判，flex: 1 的输入框被压缩。
绕过方案很直接：
- 放弃
100vh，改用100%+ 显式父容器高度（如html, body { height: 100%; }） - 所有表单控件统一加
box-sizing: border-box;，确保padding不额外撑宽 - 输入框类名统一（如
class="form-control"），CSS 中写.form-control { width: 100%; max-width: 100%; } - 小屏下按钮图标隐藏时，同步重置
padding-right，否则文字顶到右边界
回车提交失效，但点击按钮正常？
大概率是按钮缺了 type="submit"。Flexbox 只管布局，不负责表单语义。没有这个属性，<form></form> 不识别该按钮为提交触发器，回车事件不会冒泡到表单层面。
其他常见干扰项：
- 按钮在
<form></form>外部，脱离表单作用域 - 多个
type="submit"按钮共存，但未设form属性绑定目标表单 - CSS 中误加
pointer-events: none或opacity: 0遮挡了交互区域
真正联动的关键不在视觉对齐，而在 HTML 结构语义和 flex 行为边界的精准控制——比如 min-width: 0 这种反直觉设定，恰恰是多数人调试半天才翻到的盲点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
