使用 CSS Flexbox 布局图片卡片非常高效，能快速实现响应式、对齐整齐的布局。它特别适合处理大小不一的内容区域，比如包含图片、标题和描述的卡片组。
基本结构与 Flex 容器设置
图片卡片布局通常由一个容器包裹多个卡片项。将容器设为 display: flex 是第一步。
示例结构：给外层容器添加以下样式，即可开启 Flex 布局：
- display: flex：启用弹性布局
- flex-wrap: wrap：允许换行，适配小屏幕
- gap: 16px：设置卡片之间的间距（推荐使用 gap 而非 margin）
- justify-content: center 或 space-between：控制主轴对齐方式
卡片项的灵活控制
每个卡片作为 flex 项目，可通过 flex 属性控制其尺寸和伸缩行为。
- flex: 0 1 200px：表示不放大，可缩小，基础宽度 200px，适合响应式
- 在中等屏幕上可设为 flex: 0 1 calc(50% - 8px)，每行显示两个
- 大屏幕上用 calc(25% - 12px) 实现一行四列
配合媒体查询，可以平滑调整不同设备下的显示效果。
卡片内部内容对齐
卡片本身也可以是 flex 容器，用于对齐图片下方的文字。
- 设置卡片 display: flex 和 flex-direction: column
- 图片顶部固定，文字部分自动填充剩余空间
- 使用 margin-top: auto 将按钮或描述推到底部
这样即使文字长度不同，卡片底部也能对齐。
响应式断点建议
结合媒体查询，让布局更智能：
- 手机端：flex: 0 0 100%，一列显示
- 平板：flex: 0 0 calc(50% - 10px)，两列
- 桌面端：根据容器宽度设为 25% 或 33%
使用 min-width 断点触发布局变化，保证内容始终可读。
基本上就这些。Flexbox 让图片卡片布局变得简单又灵活，无需浮动或定位就能实现专业效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
