Flex布局可精准控制图文对齐：设容器display:flex，justify-content控制水平分布（如center居中、space-between两端对齐），align-items控制垂直对齐（如center解决错位），align-self微调单个元素，flex-wrap处理换行，max-width:100%防图片溢出。
图片和文字排列不协调，通常是因为默认的文档流对齐方式（如基线对齐）不符合视觉预期。用 Flex 布局可以精准控制二者在水平和垂直方向上的对齐关系，无需浮动、定位或复杂 hack。
设置容器为 flex 并统一主轴对齐
给包含图片和文字的父容器添加 display: flex，再用 justify-content 控制左右/水平分布：
- justify-content: flex-start —— 左对齐（默认）
- justify-content: center —— 居中对齐，适合标题+图标组合
- justify-content: space-between —— 两端对齐，适合导航栏中的 logo 和菜单
用 align-items 精确控制垂直对齐
图片和文字高度不一致时，常见“文字吊在图片下方”问题。启用 align-items 可整体调整交叉轴（默认为垂直方向）对齐方式：
- align-items: center —— 垂直居中，最常用，解决图文上下错位
- align-items: flex-start —— 顶部对齐，适合卡片标题+缩略图场景
- align-items: baseline —— 基线对齐（类似默认 inline 行为），慎用，易受字体影响
单个元素微调：使用 align-self
当仅需调整某张图片或某段文字的位置（比如让图标略高于文字），可在子元素上单独设置 align-self：
- align-self: center —— 覆盖父级 align-items，使该元素垂直居中
- align-self: flex-end —— 让该元素贴底部对齐
- 注意：align-self 对 flex 容器的直接子元素生效，嵌套层级要留意
避免换行与尺寸干扰
Flex 默认会把子元素排在同一行（flex-wrap: nowrap）。如果图片宽度过大或文字过长导致溢出，可加：
- flex-wrap: wrap —— 允许折行，配合 justify-content 仍保持对齐逻辑
- max-width: 100% 给图片，防止撑破容器
- white-space: nowrap 或 overflow: hidden 控制文字溢出行为（按需）
