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

相关推荐
阿华的代码王国22 分钟前
【Android】RecyclerView复用CheckBox的异常状态
android·xml·java·前端·后端
一条上岸小咸鱼23 分钟前
Kotlin 基本数据类型(三):Booleans、Characters
android·前端·kotlin
Jimmy26 分钟前
AI 代理是什么,其有助于我们实现更智能编程
前端·后端·ai编程
ZXT40 分钟前
promise & async await总结
前端
Jerry说前后端41 分钟前
RecyclerView 性能优化:从原理到实践的深度优化方案
android·前端·性能优化
画个太阳作晴天1 小时前
A12预装app
linux·服务器·前端
7723891 小时前
解决 Microsoft Edge 显示“由你的组织管理”问题
前端·microsoft·edge
烛阴1 小时前
前端必会:如何创建一个可随时取消的定时器
前端·javascript·typescript
JarvanMo2 小时前
Swift 应用在安卓系统上会怎么样?
前端
LinXunFeng2 小时前
Flutter - 详情页 TabBar 与模块联动?秒了!
前端·flutter·开源