CSS justify-content 不生效的原因 失效

MDN文档： https://developer.mozilla.org/zh-CN/docs/Web/CSS/justify-content

CSS justify-content 属性定义浏览器如何沿着弹性容器的主轴和网格容器的行向轴分配内容元素之间和周围的空间。

justify-content什么情况下会不生效（失效）？

当 length 属性和自动外边距属性生效之后，对齐已经完成了。
也就是说，如果弹性布局中存在至少一个弹性元素，而且这个元素的 flex-grow 属性不等于 0，
那么对齐方式不会生效，就像没有多余空间的情况。

举个错误例子：
在 flex container 中的多个元素（比如div）中，有某个div设置过 flex-grow 属性的值，则 justify-content 属性会失效。

如果你搜索不到 flex-grow，可以直接搜索 flex，因为 flex: flex-grow flex-shrink flex-basis

https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex