图片在flex容器中被拉伸变形是因align-items: stretch默认值所致，应设为flex-start或center；最后一行变高需避免flex: 1，改用calc()定宽并加align-content: flex-start；保持16:9需max-width: 100%; height: auto; min-width: 0，并可辅以aspect-ratio或object-fit。
flex容器里图片被拉伸变形？关掉align-items: stretch
Flex默认的align-items: stretch会让所有子项（包括<img>）在交叉轴方向强行撑满高度，哪怕图片本身是16:9，也会被垂直拉伸——这不是图片问题，是flex的默认行为。解决方法很简单：显式覆盖这个值。
- 主轴为水平（
flex-direction: row）时，交叉轴是垂直方向，设align-items: flex-start或center即可让图片按自身比例渲染 - 若用了
flex-direction: column，交叉轴变成水平，此时要检查justify-content是否过度约束了宽度 - 别给
<img>直接加height: 100%或flex: 1，这会破坏固有宽高比
最后一行图片突然变高？放弃flex: 1，改用calc()定宽
用flex: 1会让子项在剩余空间里强制拉伸，尤其当内容不满整行时，最后一行会被“额外分配空间”，导致高度突兀增长（俗称“底行膨胀”）。正确做法是让每个项目有确定宽度，再靠flex-wrap自然折行。
- 假设想最多4列，间隙
gap: 1vmin，则每项宽度应为width: calc((100% - 3vmin) / 4)（4项→3个间隙） - 更通用写法：
width: calc(25% - 0.75vmin)，但语义不如前者清晰 - 务必加
align-content: flex-start，否则行会堆积到容器底部；justify-content: flex-start避免末行左右空隙不均
图片不保持16:9比例？max-width + height: auto + min-width: 0三件套
<img>天生支持等比缩放，前提是别锁死两个尺寸。但仅靠max-width: 100%; height: auto还不够——在复杂嵌套flex中，它可能被flex-shrink压缩到极窄，导致height: auto失去参照而失效。
- 必须补上
min-width: 0（或min-width: 0; min-height: 0），告诉flex：“这个替换元素可以安全收缩” - 现代浏览器可加
aspect-ratio: 16/9进一步约束容器比例，兼容性要求高时用伪元素padding-bottom占位法 - 若需裁切填充而非留白，用
object-fit: cover配合overflow: hidden，但别和height: auto混用
小屏大屏列数不同？用媒体查询切换calc()参数
单靠一个calc()无法适配所有断点，必须配合媒体查询动态调整列数和对应宽度计算。注意间隙总宽随列数变化，不能简单减固定值。
- 小屏（
max-width: 767px）：2列 →width: calc((100% - 1vmin) / 2) - 中屏（
768px ≤ width ）：3列 → <code>width: calc((100% - 2vmin) / 3) - 大屏（
≥ 1024px）：4列 →width: calc((100% - 3vmin) / 4) - gap建议用
vmin单位（如1vmin），比px或rem更能响应视口变化
真正难的不是写出这些规则，而是意识到：flex布局的“弹性”在这里是干扰项，你要主动放弃它，用确定性宽度+自动换行来换取视觉一致性。很多项目卡在最后一行变高、图片拉伸、小屏列数错乱，根源都在试图让flex“自动算”，而不是自己控制宽度与间隙的关系。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
