flex-direction 控制主轴方向，决定图片和文字横排（row）或竖排（column），需作用于容器；配合 align-items、justify-content、flex-shrink 和 Object-fit 才能实现舒适排版。
flex-direction 控制主轴方向，决定图片和文字是横排还是竖排
默认 flex-direction: row，主轴水平向右，图片和文字会并排显示；改成 column 就变成上下堆叠。注意：这个属性作用在容器（比如 .card）上，不是图片或文字本身。
常见错误是直接给 <img alt="css如何用Flexbox实现图片和文字的排版_通过flex-direction调整方向" > 或 <p></p> 设置 flex-direction——没用，它只对 flex 容器生效。
- 横向布局（默认）：
flex-direction: row→ 图片左、文字右（或反过来，取决于 HTML 顺序和order） - 纵向布局：
flex-direction: column→ 图片在上、文字在下（或调换顺序用order） - 反向横向：
flex-direction: row-reverse→ 文字在左、图片在右（HTML 顺序不变，仅视觉翻转） - 反向纵向：
flex-direction: column-reverse→ 文字在上、图片在下
图片和文字尺寸不一致时，用 align-items 和 justify-content 协同控制对齐
仅靠 flex-direction 不足以解决“图片高、文字矮，结果文字贴顶难看”这类问题。必须配合交叉轴和主轴的对齐控制。
例如容器设了 flex-direction: row，那主轴是水平的，justify-content 控制左右分布，align-items 才管图片和文字的上下对齐（即交叉轴）。
立即学习“前端免费学习笔记（深入）”；
-
align-items: center→ 让文字垂直居中对齐图片（最常用） -
justify-content: space-between→ 图片靠左、文字靠右，中间留空 -
align-items: flex-start→ 全部顶部对齐（可能让文字显得“吊着”） - 若用
column，则justify-content变成控制上下间距，align-items控制左右对齐（如align-items: flex-start让两者左对齐）
响应式切换方向：用媒体查询重设 flex-direction
PC 上横排更省空间，手机上竖排更易阅读——直接在媒体查询里改 flex-direction 就行，无需 js。
@media (max-width: 768px) { .content { flex-direction: column; } }注意：别忘了同步检查 align-items 和 justify-content 是否还合理。比如横排时用 justify-content: space-between，竖排后可能要改成 justify-content: flex-start，否则文字会卡在顶部下方一大段空白。
- 移动端竖排常配
align-items: stretch（默认），让文字块宽度撑满容器 - 避免在媒体查询里漏掉
flex-wrap——虽然单图+单文一般不换行，但加个flex-wrap: nowrap更明确 - 如果用了
order调整过顺序，确保它在不同断点下仍符合阅读逻辑
图片拉伸变形？用 object-fit + flex-shrink 配合控制
Flex 默认会让子项收缩（flex-shrink: 1），图片可能被压扁。这不是 flex-direction 的锅，但常一起出现。
关键点：给图片加 object-fit: cover 或 contain，再限制其 flex 缩放行为。
-
img { flex-shrink: 0; }→ 禁止图片缩小，保持原始尺寸（适合固定宽高的卡片） -
img { width: 100%; height: 200px; object-fit: cover; }→ 固定高度+裁剪，避免拉伸 - 文字区域建议用
flex: 1（即flex: 1 1 auto），让它自动填满剩余空间，而不是靠width硬设 - 别给图片设
height: 100%却不设父容器高度——flex 容器高度由内容撑开，容易导致图片高度计算异常
实际排版中，flex-direction 是方向开关，但真正让图片和文字“看起来舒服”的，是它和 align-items、flex-shrink、object-fit 这几个属性的组合效果。漏掉任意一个，都可能在某个设备或内容长度下突然错位。