align-items: flex-start 最可靠，因它对齐子元素主轴起点；需确保父容器 display: flex、清除图片 vertical-align 和文字 margin/line-height 干扰，IE11 用 baseline 或 table-cell 兼容。
多行文字和图片在 flex 容器里不对齐，align-items: start 没效果？
常见原因是父容器没设 display: flex，或者子元素（比如 <p> 或 <span>）默认有 margin、line-height 或 vertical-align 干扰对齐。flex 的 align-items 只作用于直接子元素，且只在单行 flex 容器中生效（flex-wrap: wrap 时行为会变）。
- 确认父容器已声明
display: flex，且未被其他样式（如float、position: absolute）破坏文档流 - 检查图片是否是内联元素（如未设置
vertical-align: top），它可能因基线对齐导致视觉偏移 - 文字容器若用了
margin（尤其上下边距），会撑开交叉轴空间，掩盖align-items效果
align-items: center 让文字“看起来”居中，但实际顶部不齐？
这是因为 align-items: center 是按容器的交叉轴中心对齐，而多行文字的“内容区域”（content box）高度受 line-height、font-size 和行数影响，图片则按自身高度参与计算。结果常是文字块整体居中，但首行文字离图片顶边仍有空隙。
- 用
align-items: flex-start更可靠——它对齐的是子元素的主轴起点，对图文并排最直观 - 若仍不齐，给图片加
align-self: flex-start强制覆盖父级align-items - 避免给文字容器设固定
height或min-height，否则可能截断或拉伸行高
图片是 <img> 标签，文字是 <p>，怎么写最稳？
结构尽量扁平，避免嵌套块级容器干扰 flex 布局。图片默认是内联元素，在 flex 中会被当作块级处理，但保留部分内联特性（如换行符生成空白节点），所以建议显式重置。
.container {
display: flex;
align-items: flex-start; /* 不用 start，用 flex-start 才是标准值 */
gap: 12px; /* 替代 margin，更可控 */
}
<p>.container img {
flex-shrink: 0; /<em> 防止图片被压缩 </em>/
vertical-align: top; /<em> 清除基线对齐残留 </em>/
}</p><p>.container p {
margin: 0; /<em> 移除默认上下边距 </em>/
line-height: 1.5; /<em> 避免过大的行高推远顶部 </em>/
}IE11 兼容时 align-items 失效怎么办？
IE11 对 align-items 支持有限，特别是和 flex-wrap 混用时。它把 flex-start 解析为 start，但某些场景下会回退到基线对齐。
立即学习“前端免费学习笔记（深入）”；
- 优先用
align-items: baseline+ 统一设置vertical-align: baseline给所有子元素（包括图片） - 或改用
display: table-cell+vertical-align: top，兼容性更好但语义弱 - 避免在 IE11 中依赖
gap，改用margin模拟间距
多行文字对齐的关键不在“调哪个值”，而在控制好每个子元素的盒模型起点——尤其是图片的 vertical-align 和文字的 margin、line-height。flex 是手段，不是万能胶。
