1. 为什么选择 Flexbox 实现图片与文本并排
在现代前端开发中，图片与文本并排的布局场景广泛，包括博客卡片、产品介绍、新闻摘要等。使用 Flexbox 可以让这类布局变得简单、直观且具备很好的响应性。Flexbox 的主轴与交叉轴概念让图片和文本像同一组项一样灵活排列，极大提升了开发效率。
相较于旧式的浮动布局，Flexbox 更容易维护，不需要清除浮动、不会为了对齐而破坏文档结构。在图片在左、文本在右的典型并排场景中，Flexbox 提供了稳定的对齐、等距间距以及自动换行的能力，确保在不同屏幕宽度下都能保持良好可读性。
本指南聚焦“如何用 Flexbox 实现图片与文本并排布局”，以实战为导向，帮助前端开发者从概念到代码快速落地，形成可重复使用的组件。这是一个完整的实战指南，覆盖从基本结构到进阶优化的全过程。
2. 关键概念：Flexbox 的主轴、交叉轴、对齐
要理解如何用 Flexbox 实现图片与文本并排，先掌握 flex 容器与子项的关系，以及主轴（主排列方向）和交叉轴（垂直方向）的概念。display: flex 将父容器变为弹性容器，子项按主轴方向排列。
在主轴方向上，justify-content 用于控制水平方向的对齐方式，如居中、两端对齐等；而 align-items 则控制在交叉轴上的对齐，确保图片和文本在垂直方向的对齐一致。
当内容溢出容器时，flex-wrap 允许换行，避免单行文本挤压。通过合理组合这几项属性，可以实现稳定的图片文本并排，并在需要时自动改为纵向布局。响应式设计的关键在于这些属性的组合。
3. 基本实现：图片在左、文本在右的并排布局
最常见的做法是在一个 flex 容器内放置一个图片元素和一个文本容器。通过设置图片的固定宽度或最大宽度，以及文本区域的自适应宽度来实现清晰的结构分工。图片固定、文本自适应是常见的最佳实践。
为了避免图片变形，通常给图片设置 width: 100%（在图片容器内）以及 height: auto，必要时再结合 object-fit: cover 来裁剪图片以适应容器比例。
下面给出一个最小可运行的示例，帮助你理解原理并快速应用到实际的 UI 卡片中。通过该示例可以直接观察到图片与文本的并排效果。
3.1 基本结构示例
HTML 结构示例展示了图片与文本作为并排的两端项放置在同一个 flex 容器中。这是一种可直接复用的模板，便于在不同卡片中替换图片和文本内容。
<div class="media"><img src="image.jpg" alt="示例图片" /><div class="content"><h3>标题文本</h3><p>描述文本，提供关键信息与摘要。</p></div>
</div>3.2 相关 CSS 样式
核心的 CSS 是让父容器成为弹性布局，同时控制图片与文本的间距和对齐。通过 flex 布局，图片与文本自然形成水平对齐，并在需要时保持容器内的对齐一致性。
.media {display: flex;align-items: center;gap: 16px;
}
.media img {width: 200px;height: auto;object-fit: cover;
}
.content {flex: 1 1 auto;
}
如果需要在小屏幕上让文本重新排布，可以在媒体查询中改变 flex-direction，从水平并排切换为垂直叠放，以保障可读性与视觉层级。
@media (max-width: 600px) {.media { flex-direction: column; align-items: stretch; }.media img { width: 100%; height: auto; }
}4. 进阶技巧：自适应图片、文本溢出处理、对齐方式
在实际项目中，图片与文本并排布局需要考虑更丰富的场景，例如图片尺寸不一、文本长度差异大、以及需要兼容多种屏幕尺寸。使用 flex-wrap、gap、min-width、max-width 等属性组合，可以实现更鲁棒的自适应效果。
为了防止图片缩小时影响文本排布，可以通过设置 flex-shrink: 0，确保图片宽度不被过度压缩，同时让文本区域保持可读性。另一方面，文本区域可以使用 min-width 或固定宽度与 flex: 1 1 auto 的组合来分配剩余空间。
文本溢出时，可以结合 text-overflow: ellipsis、white-space: nowrap，在保持整洁的同时告知用户有更多文本未显示。下面给出一个自适应示例，展示在不同设备上的表现。
@media (max-width: 768px) {.media { flex-direction: row; align-items: center; flex-wrap: wrap; }.media img { width: 40%; min-width: 180px; max-width: 240px; flex: 0 0 auto; }.media .content { flex: 1 1 300px; min-width: 0; }
}
4.1 自适应组件示例
下面的示例展示了一种可复用的组件结构，便于在不同页面重复使用。组件化设计有助于提升代码复用性与可维护性。
<article class="media-card" aria-label="图片与文字卡片"><img src="thumb.jpg" alt="缩略图"><div class="text"><h4>卡片标题</h4><p>这是卡片的描述性文本，简要概述要点。</p></div>
</article>.media-card {display: flex; align-items: center; gap: 16px;
}
.media-card img { width: 180px; height: auto; object-fit: cover; flex-shrink: 0; }
.media-card .text { flex: 1 1 auto; min-width: 0; }5. 兼容性与无障碍性考虑
在跨浏览器场景中，现代浏览器对 Flexbox 的支持相对成熟，但仍需注意旧版浏览器的兼容性与前缀问题，确保在核心浏览器中的一致性。同时，无障碍性也应该被纳入考虑：合理使用语义标签、提供 alt 文案、保持键盘可聚焦的可访问性，都是实现图片与文本并排布局时的要点。
为保证易用性，建议在图片 alt 文案中包含关键信息，在文本区域使用语义标签（如 h3、p 等）来表达层级，方便辅助技术理解页面结构。
此外，利用一致的组件化结构，可以在需要时快速替换图像资源、文本内容，同时保持布局一致性与无障碍标准。可维护性与可访问性是高级前端开发的基石。
6. 实战要点与可维护性建议
要让用 Flexbox 实现图片与文本并排布局的代码库可持续，建议采用统一的命名规范、组件化的结构，以及明确的可重用性目标。模块化 CSS、独立的 UI 组件、以及明确的键盘/屏幕阅读顺序，都能提升团队的协作效率。
在实际项目中，优先使用可复用的模板，尽量减少“硬编码”的像素值，改用灵活的单位（如 rem、百分比）。同时，确保结构语义清晰，避免仅通过样式来传递信息，这样可以提升可维护性与测试性。
下面提供一个简洁的、易于集成的图片-文本卡片结构，便于在不同页面快速落地：可复用、可测试、易扩展。
<article class="media-card" aria-label="图片与文字卡片"><img src="photo.jpg" alt="描述性文字"><div class="text"><h3>卡片标题</h3><p>简短描述，用于概览信息。</p></div>
</article>.media-card {display: flex; align-items: center; gap: 1rem;
}
.media-card img { width: 160px; height: auto; flex-shrink: 0; object-fit: cover; }
.media-card .text { flex: 1 1 auto; min-width: 0; }