align-items: center失效主因是父容器未启用Flex布局或缺乏交叉轴高度：必须设display: flex且父容器有明确高度（如min-height: 100vh），同时确保子元素未脱离文档流或显式限制尺寸。
为什么align-items: center加了却没对齐
不是样式没写，是容器或子元素没满足 Flex 对齐前提。常见失效点有三个：input没设flex: 1、父容器没设height或min-height、图标（如<img>或<svg>）仍为默认display: inline。Flex 的align-items只对直接子元素生效，而inline级图标会参与基线计算，干扰垂直居中逻辑。
必须确保：
- 父容器用
display: flex且显式设height（如height: 40px），否则align-items: center在无高度约束时可能退化为stretch -
input设flex: 1，不能用width: 100%——后者会与 Flex 的尺寸分配冲突，导致图标被挤出或错位 - 图标加
display: inline-block或flex-shrink: 0，防止小屏下被压缩变形
input和图标间距控制用gap还是margin
gap是首选，但得看浏览器支持。它作用于 Flex 容器内子项之间，不污染单个元素样式，且不会因图标是否可见而留下空白（margin在图标隐藏时仍占位）。
兼容性注意点：
立即学习“前端免费学习笔记（深入）”；
- Chrome 105+、Firefox 103+、Safari 16.4+ 原生支持
gap；IE 完全不支持 - 旧环境需回退：
margin-right: 8px+:last-child { margin-right: 0 }，或用padding-right配合overflow: hidden裁切 - 别对
input单独设margin-left——它会破坏flex: 1的自动填充逻辑，让右侧图标无法紧贴
SVG图标在输入框里位置漂移怎么办
漂移不是渲染 bug，是 SVG 缺少关键控制参数。未设width/height的<svg>在 Flex 容器中会被当作“尺寸未知”的替换元素，浏览器按内部坐标系和默认宽高比推算，结果因引擎差异而错位。
稳定写法必须同时满足：
-
<svg>标签上显式写width="1em"和height="1em"（值相等，防拉伸） -
viewBox="0 0 16 16"（统一原点和比例，避免 Safari/Android WebView 渲染偏移） - 加
flex-shrink: 0，禁用 Flex 自动压缩，尤其在窄屏下 - 避免用
vertical-align——Flex 容器中它无效，还可能掩盖真实布局问题
移动端输入框+图标整体宽度失控
问题常出现在按钮或图标区域随屏幕缩放“忽大忽小”，甚至文字溢出。根本原因是没锚定弹性基准，仅靠flex: 1无法约束最小内容尺寸。
可靠做法是组合控制：
- 父容器设
display: flex+flex-wrap: nowrap（禁用换行） -
input用flex: 1 1 0（即flex-grow: 1,flex-shrink: 1,flex-basis: 0），并加min-width: 0防文本撑开 - 图标区域（如
<img>或<button>）设flex: 0 0 auto+min-width: 36px（保底可点击尺寸） - 全局加
box-sizing: border-box，避免border/padding叠加导致总宽超限
最易忽略的是min-width: 0——没有它，长英文或数字会强行撑开input，把图标顶到下一行，哪怕容器明明够宽。
