通过 display: flex 配合 align-items: flex-start，可在不修改 HTML 结构的前提下，精准控制复选框与多行文本的垂直对齐关系，确保首行基线一致且后续换行自然左对齐。
通过 `display: flex` 配合 `align-items: flex-start`，可在不修改 html 结构的前提下，精准控制复选框与多行文本的垂直对齐关系，确保首行基线一致且后续换行自然左对齐。
在实际开发中，常遇到如下场景：一个 <div> 内直接嵌套 <input type="checkbox"> 和一段长文本（无额外标签包裹），期望复选框与文本首行顶部对齐，同时文本换行后仍保持左侧对齐、视觉整齐——但默认文档流下，<input> 作为替换元素，其基线（baseline）会与文本第一行的字母底部对齐，导致视觉上“下沉”，尤其在多行文本时更显突兀。
此时，无需添加任何 wrapper 元素或修改 HTML 结构，仅需一行关键 CSS 即可优雅解决：
div {
display: flex;
align-items: flex-start;
gap: 0.75rem; /* 可选：控制复选框与文本间距，推荐使用 gap 替代 margin */
}✅ 效果说明：
- display: flex 将 <div> 转为弹性容器，其子元素（<input> 和文本节点）成为 flex 项目；
- align-items: flex-start 确保所有项目沿交叉轴（此处为垂直方向）顶端对齐，即复选框顶部与文本第一行的顶部（非基线）严格齐平；
- gap 提供语义化、无副作用的间距控制，避免因 margin 引发的外边距合并或布局干扰。
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 文本内容是匿名文本节点（anonymous text node），在 Flex 布局中会被自动包装为一个 flex item，因此无需额外 <span> 包裹；
- 若需兼容 IE10+，gap 属性需配合 margin 回退（如 margin-left: 0.75rem 作用于文本节点的伪类，但现代项目建议忽略 IE）；
- 避免使用 vertical-align（对 flex item 无效）或 line-height（易破坏多行文本行高一致性）等传统方案；
- 如需复选框居中对齐文本行高（如与中文字体 x-height 对齐），可改用 align-items: center，但通常 flex-start 更符合表单控件的设计惯例。
? 进阶提示：若该模式需全局复用，建议抽离为工具类，例如：
.flex-checkbox-label {
display: flex;
align-items: flex-start;
gap: 0.75rem;
}然后在 HTML 中直接应用：
<div class="flex-checkbox-label"> <input type="checkbox"> Lorem ipsum dolor sit amet... </div>
这一方案简洁、健壮、语义清晰，是现代 CSS 布局解决内联控件对齐问题的标准实践。
