flexbox布局需设display: flex和flex-wrap: wrap，用gap替代margin，卡片用flex: 0 0 calc()控制宽度，align-items: flex-start避免拉伸，点击区域通过padding扩大。
Flexbox容器必须设为display: flex且配合flex-wrap: wrap
不加flex-wrap: wrap，卡片在小屏下会强行横向溢出，而不是换行。很多人只写display: flex就以为完事了，结果在手机上看到一长条滚动条。
推荐写法：
.team-grid {
display: flex;
flex-wrap: wrap;
gap: 1.5rem; /* 替代 margin，更可控 */
}
gap比用margin手动控制间距更可靠——它自动处理首尾空白，且在 Flex 容器中兼容性已很好（Chrome 84+/Firefox 63+/Safari 14.1+）。如果需支持 Safari 13 或更早，可用padding + margin降级，但优先保gap。
单张卡片宽度要用flex: 0 0 calc(...)而非width
直接写width: 300px或width: 33.33%会导致卡片无法弹性收缩，尤其在窄屏下撑破容器。Flex 布局里，控制子项尺寸最稳妥的方式是flex缩写。
常见响应式断点建议：
- ≥768px：每行3张 →
flex: 0 0 calc(33.333% - 1rem)（减去 gap 占用） - ≥480px 且 @media覆盖为
flex: 0 0 calc(50% - 0.75rem) - flex: 0 0 100%
注意：flex: 0 0禁用伸缩，避免内容撑宽卡片；calc()里的减法必须精确匹配gap值，否则会出现错位。
图片和文字内容高度不一致时，用align-items: flex-start
默认align-items: stretch会让所有卡片拉齐到同一高度，但团队照片尺寸、标题行数不同，强行拉伸会导致头像被裁、文字行距异常或空白难看。
解决方法很简单：
.team-grid {
align-items: flex-start;
}
这样每张卡片按自身内容高度自然排列，视觉更真实。若想局部统一头像高度，单独给img设height: 200px; object-fit: cover;即可，不要动容器的align-items去“硬对齐”。
移动端点击区域太小？给a或button加padding别碰font-size
卡片常带“查看详情”链接，但小屏下手指点不准。错误做法是放大font-size再调line-height，这会破坏文字层级和行高节奏。
正确做法是直接扩大可点击区域：
.card-action {
display: inline-block;
padding: 0.5rem 1rem;
margin-top: 0.75rem;
}
只要父容器是 Flex，inline-block不会破坏布局；padding提供物理点击面积，且不影响字体渲染。iOS Safari 对小于 44px 的点击区域有警告提示，这个padding组合基本能达标。
卡片阵列真正的难点不在布局，而在内容高度不可控时如何保持视觉呼吸感——gap、flex-basis计算、align-items取值这三处稍一松懈，整排就显得挤或散。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
