据我所知, justify-items
和 justify-self
CSS属性在CSS网格布局中使用,在Flexbox布局中没有任何作用(与名称相似但不同的 justify-content
属性不同)。实际上,MDN在docs中针对justify-items
和justify-self
都说
整个标题为的小节。Box Alignment in Flexbox页面上的Flexbox 中没有证明自己。
然而,奇怪的是, justify-items
文档列出了这两个可能的值:
如果您开始设置justify-items
或justify-self
属性,这些值也会在Chrome和Firefox等浏览器的开发人员工具中显示为自动完成建议。
如果在Flexbox布局中忽略justify-items
和justify-self
,为什么存在这些值?他们被吓到了吗?他们在做什么?
最佳答案
这是一个错误。 justify-items
和justify-self
属性不适用于flexbox。
考虑您的信息来源:MDN Web Docs(以前为Mozilla开发人员网络)。该资源尽管通常有用且可靠,但仍代表二手信息。
MDN页面上的CSS定义基于W3C官方文档。 MDN贡献者(人员)读取,过滤和解释W3C数据以在MDN上呈现。因此,MDN信息容易受到人为错误的影响。这就是这里的问题。
如果直接查看规范,则会找到正确的信息:
好的。因此,让我们转到justify-self
。
如前所述,justify-items
和justify-self
不适用于 flex 商品。
还要注意justify-items
和justify-self
适用于多个Box模型,而不仅仅是CSS Grid。有关更多详细信息,请参见CSS Box Alignment Module specification。