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

相关推荐
WebInfra2 分钟前
📱开源 AI 工具驱动 iOS 自动化 、接入全新 Qwen 模型 - Midscene v0.29 发布
前端·ios·测试
乖女子@@@4 分钟前
React-props的children属性
前端·javascript·react.js
OEC小胖胖5 分钟前
组件化思维(下):表单与交互组件,倾听用户的心声
前端·微信小程序·小程序·微信开放平台
八月十八5 分钟前
React常用Hooks及使用示例大全
前端·javascript·react.js
狼爷30 分钟前
前端项目从 Windows 到 Linux:构建失败的陷阱
前端·node.js·angular.js
1024小神32 分钟前
vitepress多语言实现第一次跟随浏览器,第二次不跟随
前端
叫我詹躲躲34 分钟前
🚀 震撼!10道DFS&BFS神级题目让你的算法能力飙升300%
前端·leetcode
ssshooter35 分钟前
WebGL 切换 Shader 的策略
前端·webgl
WDyinh37 分钟前
积分球领取补位动画实现
前端·javascript
前端开发爱好者41 分钟前
v5.0 版本发布!Vue3 生态最强大的 3D 开发框架!
前端·javascript·vue.js