父容器没高度，align-items: center就是摆设；必须设置min-height: 100vh等可计算高度，否则交叉轴无空间导致居中失效。
父容器没高度，align-items: center 就是摆设
写了 justify-content: center 和 align-items: center 却没效果？八成是父容器高度塌缩了。Flex 的垂直居中依赖交叉轴（默认 Y 轴）有可计算长度，而 height: 100% 在上级无显式高度时完全无效。
推荐直接用 height: 100vh——视口全高，简单粗暴；若内容可能超出一屏，改用 min-height: 100vh 更稳妥，既保初始满屏，又允许自然滚动。
别在 上硬加 display: flex，否则所有直系子元素（比如多个 <p></p>）都会变成 flex item，布局立刻错乱。
img 自身宽高必须成对约束，max-width 不配 width: auto 就会翻车
只写 max-width: 100% 或 max-width: 90vw 是不够的。浏览器仍可能按原始尺寸渲染，尤其在首次加载或缓存失效时。
立即学习“前端免费学习笔记（深入）”；
必须搭配 width: auto 和 height: auto，这是浏览器按原始宽高比缩放的唯一可靠依据：
img {
max-width: 90vw;
max-height: 80vh;
width: auto;
height: auto;
}
禁止同时写 width: 100% 和 height: 200px，这会强制拉伸变形；也别给 img 加 object-fit: contain，它对普通 <img alt="如何使用Flex布局实现HTML响应式图片居中" > 标签无效。
媒体查询该改谁？不是 img，是父容器的 justify-content
想小屏居中、大屏左对齐？别在每个断点里重复定义 img { width: 100% }，冗余且易冲突。图片尺寸一次写好，对齐行为交给父容器控制。
用 Flex 时，只切换父容器的 justify-content：
- @media (max-width: 768px) { .img-container { justify-content: center; } }
- @media (min-width: 1025px) { .img-container { justify-content: flex-start; } }
注意：如果父容器用了 float 或 position: fixed，媒体查询里的 justify-content 会静默失效——Flex 属性需要干净的布局上下文。
封装专用容器，别污染通用类
别把 display: flex 直接加到 .container 或 .grid 这类通用类上。它们很可能正被其他模块依赖为块级流布局，一改就崩。
新建语义化容器，比如 .hero-img 或 .splash-image：
<div class="hero-img"> <img src="banner.jpg" alt="首页主图"> </div>
对应 CSS 只作用于该容器，后续加暗色模式、加载过渡、aspect-ratio 保护等都更安全。真正容易被忽略的是：这个容器不能是 <span></span> 这类 inline 元素，也不能被外层 overflow: hidden 截断——否则即使 Flex 生效，图片也可能被裁掉一部分。
