flex-wrap: wrap 是图文混排换行的前提，否则所有项目强行挤在一行导致溢出；需配合 flex-basis 与 min-width 控制单卡尺寸，用 gap 替代 margin，并通过内部 flex 实现图文对齐。
flex-wrap: wrap 是图文混排能换行的前提
不加 flex-wrap: wrap，所有图文项会强行挤在一行，小屏下溢出或横向滚动——这是最常被忽略的起点。Flex 默认是 nowrap，哪怕你设了 flex: 1 或百分比宽度也没用。
必须显式声明换行，才能让图文卡片在容器变窄时自动折行：
.gallery {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
-
gap推荐用，比margin更可控，且不会影响首尾外边距 - 别用
justify-content: space-between配合flex-wrap：最后一行可能只剩1–2项，会被拉满，视觉失衡 - 若需每行固定数量（如“每行3张”），优先用
grid；Flex 的“等分布局”本质是弹性分配，不是栅格对齐
flex-basis + min-width 控制单个图文项最小尺寸
只靠 flex: 1 会让小图文字被压缩变形；只设 width: 30% 又会在超小屏下过窄。真正可靠的组合是：flex-basis 定基础宽 + min-width 设底线。
.card {
flex: 1 1 280px; /* grow shrink basis */
min-width: 240px;
max-width: 100%;
}
-
flex-basis: 280px表示“理想宽度”，大屏下多列并排时以此为基准 -
min-width: 240px防止在手机上缩到无法阅读图/文，也避免 Flex 把项目压成一条线 - 注意：
max-width: 100%必须写，否则超宽内容（如长标题）会撑破容器
图片和文字在 flex-item 内部的对齐容易错位
图文混排卡里，图片常需要顶部对齐、文字居中或底部对齐，但直接在 .card 上设 align-items 无效——它只控制子元素（即 .card 的直接子元素）在交叉轴上的位置，而图片和文字通常都在同一个 .card 内部嵌套结构里。
正确做法是让图文容器自己变成 flex，并控制其内部对齐：
.card-content {
display: flex;
flex-direction: column;
height: 100%;
}
.card-img {
width: 100%;
height: 160px;
object-fit: cover;
}
.card-text {
margin-top: auto; /* 文字沉底 */
padding: 0.5rem;
}
- 用
margin-top: auto比align-self: flex-end更稳，兼容性更好 -
object-fit: cover防止图片拉伸变形，但需确认浏览器支持（IE 不支持，2026 年已基本可忽略） - 如果文字要垂直居中，用
display: flex; align-items: center; justify-content: center包一层更可靠，别依赖line-height
@media 中只需微调 flex-basis，不要重写整套 flex 规则
很多教程在媒体查询里重复写 display: flex、flex-wrap，其实完全没必要。Flex 布局本身已是响应式的，@media 只需调整关键阈值参数。
@media (max-width: 768px) {
.card { flex-basis: 50%; }
}
@media (max-width: 480px) {
.card { flex-basis: 100%; min-width: 100%; }
}
- 大屏：默认
flex-basis: 280px→ 自动算出每行 3–4 张 - 平板：降到
50%→ 每行最多 2 张 - 手机：强制
100%+min-width: 100%→ 确保单列，且不被 Flex 缩小 - 切忌在 media query 里改
flex-direction：从 row 改 column 会导致 DOM 顺序和视觉顺序不一致，影响可访问性和 SEO
真正难的不是写几行 Flex，而是理解 flex-basis 和 min-width 的协作边界——前者管“想占多少”，后者管“至少留多少”，两者缺一不可。小屏下图文错位、文字被截断、图片比例崩坏，90% 都出在这里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
