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

相关推荐
GUIQU.3 分钟前
【Vue】微前端架构与Vue(qiankun、Micro-App)
前端·vue.js·架构
数据潜水员10 分钟前
插槽、生命周期
前端·javascript·vue.js
2501_9071368212 分钟前
CSS 学习与工程化实践指南
css
2401_8370885016 分钟前
CSS vertical-align
前端·html
优雅永不过时·22 分钟前
实现一个漂亮的Three.js 扫光地面 圆形贴图扫光
前端·javascript·智慧城市·three.js·贴图·shader
CodeCraft Studio2 小时前
报表控件stimulsoft教程:使用 JoinType 关系参数创建仪表盘
前端·ui
春天姐姐3 小时前
vue知识点总结 依赖注入 动态组件 异步加载
前端·javascript·vue.js
互联网搬砖老肖3 小时前
Web 架构之数据读写分离
前端·架构·web
钢铁男儿4 小时前
C# 方法(值参数和引用参数)
java·前端·c#
阿金要当大魔王~~4 小时前
面试问题(连载。。。。)
前端·javascript·vue.js