使用 flex-direction: row 和 align-items 可实现图文混排，通过 align-items 控制垂直对齐方式，结合 flex-shrink、flex 和 gap 等属性优化布局，使内容整齐且自适应。
在使用 CSS Flexbox 实现图文混排时，flex-direction: row 与 align-items 的结合非常实用。它能让你将图片和文字并排排列，并通过垂直对齐控制它们的相对位置，使布局更灵活、整齐。
基本结构：使用 flex-direction: row
默认情况下，Flexbox 容器的主轴方向是水平的（即 flex-direction: row），适合实现图文左右排列。
假设你有一个容器包含一张图片和一段文字：
@@##@@这是一段描述性文字...
设置容器为 Flex 布局即可让内容横向排列：
立即学习“前端免费学习笔记（深入）”；
.flex-container {
display: flex;
flex-direction: row; /* 可省略，因为这是默认值 */
}
垂直对齐：使用 align-items 控制位置
当图片和文字高度不一致时，可以使用 align-items 来统一它们在交叉轴（垂直方向）上的对齐方式。
- align-items: center：让图文在垂直方向居中对齐，最常用。
- align-items: flex-start：顶部对齐，适用于标题类布局。
- align-items: flex-end：底部对齐，适合需要底边对齐的设计。
- align-items: baseline：文字基线对齐，适合多行文本与图标混合场景。
例如，让图片和文字垂直居中：
.flex-container {
display: flex;
align-items: center;
}
.thumbnail {
width: 80px;
height: 80px;
margin-right: 12px;
}
.text {
font-size: 16px;
}
灵活调整：配合其他属性增强效果
为了提升图文混排的适应性，可结合以下技巧：
- 使用 flex-shrink: 0 防止图片被压缩。
- 给文字区域设置 flex: 1，让它自动填充剩余空间。
- 添加 gap 属性（或 margin）增加间距，提升可读性。
优化后的样式示例：
.flex-container {
display: flex;
align-items: center;
gap: 12px;
}
.thumbnail {
flex-shrink: 0;
width: 60px;
height: 60px;
border-radius: 8px;
}
.text {
flex: 1;
font-size: 15px;
line-height: 1.5;
}
基本上就这些。通过 flex-direction: row 实现横向排列，再用 align-items 精确控制垂直对齐，就能轻松完成美观的图文混排布局。不复杂但容易忽略细节。
