align-items: stretch 会强制子元素在交叉轴上拉伸填满，导致正方形变形；应设 flex-shrink: 0、min-height 替代 height 或改用 align-items: flex-start 等值来守住正方形。
因为 align-items 默认是 stretch，它会强制子元素在交叉轴上拉伸——哪怕你写了 width: 100px; height: 100px，只要父容器有高度且子元素没设 flex-shrink: 0 或 min-height 保护，就可能被撑变形。
align-items: stretch 是怎么把正方形“拉扁”的
Flex 容器默认启用 align-items: stretch，它的作用不是“保持比例”，而是“填满交叉轴”。当主轴是水平（flex-direction: row）时，交叉轴就是垂直方向；此时哪怕子元素明确写了 height: 100px，只要父容器设置了 height 且子元素没阻止收缩/拉伸，浏览器仍可能按 flex 算法重新计算尺寸。
- 如果子元素用了
flex: 1或其他弹性值，它会优先响应容器空间分配，height可能被忽略 - 如果父容器有
height: 200px，而子元素只写width: 100px没写height，stretch就会把它拉到 200px 高 - 即使写了
height: 100px，若同时存在flex-shrink: 1（默认值）且容器空间不足，它也可能被压缩变矮
怎么保住正方形不被拉伸或压缩
关键不是“关掉 stretch”，而是让子元素的尺寸声明足够强硬，或换一个更可控的对齐策略：
- 显式加
flex-shrink: 0：防止内容少时被压缩，也避免拉伸干扰height - 用
min-height替代height：比如width: 100px; min-height: 100px;，配合align-items: flex-start可稳定顶部对齐且不拉伸 - 直接改
align-items：设为flex-start、center或baseline，彻底绕过 stretch 行为 - 确保父容器没意外高度限制：比如
min-height太大，或嵌套了另一个 flex 容器传递了 stretch
常见误判场景：你以为是宽高问题，其实是 flex 顺序和嵌套惹的祸
很多“正方形变长方形”的案例，实际出在多层 flex 嵌套或 order 属性干扰上：
立即学习“前端免费学习笔记（深入）”；
- 外层容器
flex-direction: column，内层又套了个display: flex—— 此时交叉轴翻转，align-items的影响方向容易看反 - 子元素用了
order，导致渲染顺序和 DOM 顺序不一致，某些浏览器在计算 stretch 时会出偏差 - CSS 优先级冲突：比如某处写了
* { align-items: stretch }全局重置，覆盖了局部设置 - 图片或字体加载延迟：未设
aspect-ratio或object-fit的<img alt="为什么CSS Flex布局中的正方形子元素变长方形_检查align-items默认值" >在加载中会先占位成 0×0 或默认宽高比，触发临时拉伸
真正要守住正方形，得从三处下手：子元素自身的尺寸声明是否抗干扰、父容器的 align-items 是否符合预期、有没有隐藏的嵌套或全局样式在悄悄改规则。单靠删 height 或加 !important 往往治标不治本。
