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

相关推荐
拾光拾趣录11 分钟前
CSS常见问题深度解析与解决方案(第三波)
前端·css
轻语呢喃28 分钟前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端
杨进军29 分钟前
React 协调器 render 阶段
前端·react.js·前端框架
中微子32 分钟前
Blob 对象及 Base64 转换指南
前端
风铃喵游32 分钟前
让大模型调用MCP服务变得超级简单
前端·人工智能
中微子33 分钟前
智能前端实践之 shot-word demo
前端
归于尽34 分钟前
智能前端小魔术,让图片开口说单词
前端·react.js
用户98738245810134 分钟前
vite 插件
前端
无数山36 分钟前
autorelease pool
前端
支撑前端荣耀37 分钟前
四、Cypress测试框架拆解
前端