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

相关推荐
用户033307413957 小时前
TypeScript using 与 AsyncDisposableStack:在真实服务端代码中协调多资源清理
前端
daisychey7 小时前
用 Playwright 做多平台内容分发,我踩过的 8 个坑
前端
IT_陈寒8 小时前
为什么你应该学习JavaScript?
前端·人工智能·后端
大龄秃头程序员8 小时前
iOS冷启动监控Demo
前端
光影少年9 小时前
为什么 JavaScript 中 0.1 + 0.2 !== 0.3,如何让其相等?
前端·javascript·算法
掘金酱9 小时前
[稀土掘金 × 火山引擎] AI用量周榜冲刺赛|获奖名单公示
前端·人工智能·后端
泡泡oO9 小时前
“如果你还在用Superpowers,那我不要和你说话”
前端·后端·全栈
维克兜率天9 小时前
趋势过滤:避免被“假突破“反复打脸
前端
8年区块链老兵10 小时前
一篇文章教会你:用区块高度读懂比特币链上的每一笔交易
前端
xixichensh10 小时前
前端转做AI程序员第一步——开发一个AI流式对话Demo
前端