Flex布局中图标与输入框对齐需设align-items: center；图标用em单位适配字号；图标用label包裹并关联input实现点击聚焦；IE11需为input加flex: 1和min-width: 0，图标容器加flex-shrink: 0。
Flex布局下图标和输入框如何对齐不偏移
图标和input在Flex容器里常见错位，不是图标下沉就是文字上浮，本质是默认基线对齐（align-items: baseline）惹的祸。解决方法很简单：显式设为居中对齐。
-
display: flex容器必须加align-items: center，否则图标和输入框按文字基线对齐，高度稍有差异就露馅 - 图标用
<svg>或<i>时，确保它没有默认的vertical-align或外边距干扰 -
input本身别设height后又忘调line-height，否则内部光标位置和Flex居中会打架
.input-with-icon {
display: flex;
align-items: center; /* 关键 */
gap: 8px;
}图标尺寸与输入框高度怎么匹配才自然
图标太小显得单薄，太大又撑开容器——这不是靠猜，而是用em单位绑定输入框字号最稳。输入框改font-size，图标自动缩放，不用每次调width/height。
- 给
input设font-size: 14px，图标用width: 1.2em; height: 1.2em，基本贴合 - 避免用
px固定图标大小，响应式场景下容易和缩放后的输入框脱节 - 如果图标是字体图标（如Font Awesome），记得检查
font-size是否被父级继承覆盖
点击图标时如何让焦点落到输入框上
用户点图标却没触发输入框聚焦，体验断层。核心是把图标变成label的可点击区域，而不是靠JS模拟。
- 用
<label>包裹图标，并设for属性指向input的id，原生支持聚焦 - 图标若用
<svg>，需加role="button"和tabindex="0"，否则键盘不可达 - 别给图标加
pointer-events: none，这是新手常删的“防碍点击”样式，实则直接废掉交互
<label for="search"><svg>...</svg></label> <input id="search" type="text">
IE11兼容时Flex输入框图标错位怎么办
IE11对flex: 1和min-width: 0处理异常，会导致图标被挤出或输入框坍缩。绕过方式很具体，不是降级整个Flex。
立即学习“前端免费学习笔记（深入）”；
-
input必须加flex: 1+min-width: 0，否则IE11无视宽度约束 - 图标容器（比如
<span>）加flex-shrink: 0，防止被压缩变形 - 避免在IE11中用
gap，改用margin或padding分隔
Flex布局本身不难，但图标和输入框这类“混合内容”对齐，差1像素就显得毛糙；而兼容性和可访问性问题，往往上线后才暴露。
