用Flexbox对齐列表图标和文字，需将li设为flex容器并设置align-items:center；再通过margin-right或gap控制间距，统一图标尺寸并添加flex-shrink:0，确保结构扁平。
用 Flexbox 对齐列表图标和文字，关键在于把每项（li）设为 flex 容器，并统一控制子元素（图标 + 文字）的对齐方式。不是给图标加 vertical-align 或拼命调 margin，而是让布局本身具备弹性对齐能力。
给列表项启用 Flex 布局
默认 li 是块级元素，内部图标（如 i、svg 或伪元素）和文字是行内流，容易因字体基线、行高差异错位。直接让 li 变成 flex 容器：
- 给
ul li设置display: flex; align-items: center; -
align-items: center会让图标和文字在交叉轴（垂直方向）居中对齐，不受字体影响 - 避免只给图标加
vertical-align: middle—— 它依赖父元素行高，不稳定
控制图标与文字间距
对齐之后，图标和文字之间常太挤或太松。用 flex 的间隙控制更可靠：
- 给图标加
margin-right: 8px;（推荐），或用gap: 8px;（需父容器是 flex 且仅两个子元素时效果最稳） - 如果图标是伪元素（
::before），确保它被包含在 flex 容器内（比如写在li上，而不是a内部再套一层） - 避免用
span调间距 —— 语义不清，维护困难
处理不同尺寸图标的兼容性
SVG、字体图标、图片图标大小不一，容易拉高行高。Flex 能自动协调：
立即学习“前端免费学习笔记（深入）”；
- 给图标统一设
font-size（字体图标）或width/height（SVG/图片），再配合flex-shrink: 0防止被压缩 - 文字部分可加
flex: 1;占满剩余空间，适合带描述的长文本 - 若图标过大导致整体高度不均，检查是否意外设置了
line-height在父级上，flex 下它通常无需设置
不复杂但容易忽略：flex 对齐的前提是图标和文字处于同一级 DOM 结构中，别让图标藏在多层嵌套里。保持结构扁平，对齐就自然稳定了。
