Chrome 133中justify-content: stretch行为变更致Web应用样式异常

先明确核心：你之前的实现依赖了Chromium的非标准bug行为，133版本的变更是修复实现、对齐Flexbox规范的操作——justify-content: stretch的作用范围是交叉轴，而非主轴。主轴上的元素拉伸，规范里明确是通过flex-grow属性控制的。

版本差异的原因 #

Chromium 132及更早版本中，浏览器错误地让justify-content: stretch在主轴也生效，导致你的固定宽度子元素被强制拉伸填满父容器；133版本修复了这个bug，justify-content: stretch仅在交叉轴起作用（比如垂直flex布局里，子元素高度会自动拉伸），主轴上则会按照子元素的实际宽度排列，也就是你看到的子元素靠左、父容器留白的效果。

你当前的操作有没有明显错误？ #

有——你误用了justify-content: stretch来实现主轴方向的元素拉伸，这不符合CSS规范。规范里，主轴拉伸的正确实现是给子元素设置flex-grow属性，而非依赖浏览器的错误渲染。

更优的修复方案（避免大范围破坏性变更） #

不要直接把所有justify-content: stretch替换成flex-start，这会同时丢失交叉轴的拉伸效果（比如垂直布局下子元素无法自动填高）。更合理的做法是：

• 对于需要主轴拉伸的flex容器，保留justify-content: stretch（维持交叉轴的预期行为），同时给子元素添加flex-grow: 1（如果需要均分主轴空间）或对应数值；
• 如果子元素需要固定宽度但父容器要填满，可调整父容器宽度、配合flex-shrink，或者用gap控制间距，而非依赖之前的bug行为。

为什么没搜到其他用户的问题？ #

因为多数开发者遵循规范，用flex-grow实现主轴拉伸，只有长期依赖这个非标准bug的项目才会受影响，所以相关反馈较少。

内容的提问来源于stack exchange，提问作者Ralt