图文混排上下不对齐时，应设img{vertical-align:top}和.text-container{display:flex;align-items:center}；图片用flex:0 0 120px，文字用flex:1；移动端用flex-direction:column和order调整顺序；卡片等高需确保父容器有高度约束并配合-webkit-line-clamp控制行数。
图文混排时图片和文字上下不对齐怎么办
Flex 布局默认的 align-items 是 stretch，图片和文字容器高度不一致时，文字常被拉伸或错位。最直接的解法是显式设置对齐方式：
img {
vertical-align: top; /* 防止 inline 元素基线对齐导致的空隙 */
}
.text-container {
display: flex;
align-items: center; / 垂直居中，比 baseline 更可控 /
}
常见错误是只给父容器加 display: flex，却忽略子元素的 vertical-align 或 align-self 冲突。特别是当图片是 （block）混用时，容易出现顶部/底部多出几像素空白。
图片在左、文字在右的结构总挤在一起或留白过大
关键在控制主轴间距和子项尺寸比例，别依赖默认 flex: 0 1 auto：
- 图片设固定宽高或
flex: 0 0 120px（不放大、不缩小、基础尺寸 120px） - 文字区域用
flex: 1占满剩余空间，避免写死宽度 - 用
gap: 16px替代给子项单独加margin，更干净且可继承
.media-item {
display: flex;
gap: 16px;
}
.media-item img {
flex: 0 0 120px;
height: 80px;
object-fit: cover;
}
.media-item .content {
flex: 1;
}
注意：IE 不支持 gap，如果需兼容，改用 margin-right + :last-child { margin-right: 0 }。
立即学习“前端免费学习笔记（深入）”；
响应式下图文顺序要反转（移动端文字在上、图片在下）
不用 JS 切换 DOM 顺序，纯 CSS 就能解决：
- 用
flex-direction: column控制整体流向 - 配合
order属性微调子项顺序（默认都是order: 0） - 图片设
order: 1，文字保持order: 0，就能在 column 下自动后置
@media (max-width: 768px) {
.media-item {
flex-direction: column;
}
.media-item img {
order: 1;
}
}别忘了重置图片的 flex 值——在 column 下，flex: 0 0 120px 会限制高度，应改为 flex: 0 0 auto 或直接删掉，让图片按自然宽高渲染。
文字内容长度不一导致卡片高度参差不齐
Flex 容器默认不等高，但父级设 align-items: stretch（默认值）时，子项仍可能因内部内容撑开而不一致。真正统一高度要靠：
- 给文字区域设
min-height或height（慎用，易截断） - 更稳妥的是用
display: -webkit-box+-webkit-line-clamp控制行数 - 或对整个卡片设
height: 100%并确保父容器有明确高度约束
.card {
display: flex;
flex-direction: column;
height: 100%;
}
.card .content {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
实际项目里最容易被忽略的是：flex 容器本身没高度约束，height: 100% 就无效；必须从 body → container → card 逐层确认是否有高度来源。
