Flex布局中checkbox与文字不对齐源于浏览器对替换元素基线处理差异；align-items:center无效因容器高度由内容撑开且子项无尺寸参照；有效方案是设容器line-height:1并给checkbox加margin-top微调。
Flex 布局中多选按钮（checkbox）与文字不对齐，不是因为样式写错了，而是浏览器对表单控件的基线（baseline）处理不一致——尤其在 Chrome 和 Safari 中，input[type="checkbox"] 默认按内联元素基线对齐，而文字行高、字体度量、甚至系统字体都会影响它“看起来偏上”或“偏下”。
为什么 align-items: center 有时也不管用？
常见误区是以为加了 align-items: center 就万事大吉。但实际中，如果容器高度由内容撑开（比如 height: fit-content），且子元素本身没有明确的尺寸参照，浏览器会回退到内联盒模型的 baseline 对齐逻辑，此时 align-items 作用于“容器交叉轴起点”，而非“视觉中心”。
-
input[type="checkbox"]是替换元素（replaced element），其基线默认落在底部边缘附近，不是几何中心 - 若父容器未设
font-size或使用了不同字体族（如system-uivsSegoe UI），行高计算差异会放大错位 - 显式设置
vertical-align: middle在 flex 容器中无效——flex 子项忽略vertical-align
真正有效的对齐方案：强制统一基线锚点
不用 hack，也不用 JS 测量，只需两步锁定对齐基准：
- 给包裹容器（如
.checkbox-group）加上align-items: center和line-height: 1，消除行高浮动干扰 - 给
input[type="checkbox"]设置margin-top: calc(0.15em + 1px)（经验值，适配多数 14–16px 字号）——这个微调值能抵消基线偏差，比transform: translateY()更稳定 - 确保同组所有
label文字使用相同font-family和font-size，避免跨字体行高跳变
示例关键 CSS：
立即学习“前端免费学习笔记（深入）”；
.checkbox-group {
display: flex;
align-items: center;
line-height: 1;
gap: 8px;
}
.checkbox-group input[type="checkbox"] {
margin-top: calc(0.15em + 1px);
width: 16px;
height: 16px;
}
旧版 Safari 兼容性陷阱
Safari ≤ 15.3 对 gap 和 fit-content 支持不完整，且 line-height: 1 可能导致文字紧贴 checkbox 上沿。这时要：
- 改用
padding: 2px 0替代line-height控制垂直空间 - 把
margin-top微调值换成固定像素（如margin-top: 2px），并配合flex-shrink: 0防止 checkbox 被压缩 - 避免在容器上设
height，否则 Safari 会错误拉伸 checkbox
最易被忽略的一点：所有 checkbox 必须用同一套 HTML 结构（input 紧跟 label，无换行符或空格插入），否则 DOM 树中生成的文本节点会引入不可见的 baseline 偏移。
