据我所知, justify-items justify-self CSS属性在CSS网格布局中使用,在Flexbox布局中没有任何作用(与名称相似但不同的 justify-content 属性不同)。实际上,MDN在docs中针对justify-itemsjustify-self都说



整个标题为的小节。Box Alignment in Flexbox页面上的Flexbox 中没有证明自己。

然而,奇怪的是, justify-items 文档列出了这两个可能的值:



如果您开始设置justify-itemsjustify-self属性,这些值也会在Chrome和Firefox等浏览器的开发人员工具中显示为自动完成建议。

如果在Flexbox布局中忽略justify-itemsjustify-self,为什么存在这些值?他们被吓到了吗?他们在做什么?

最佳答案

这是一个错误。 justify-itemsjustify-self属性不适用于flexbox。

考虑您的信息来源:MDN Web Docs(以前为Mozilla开发人员网络)。该资源尽管通常有用且可靠,但仍代表二手信息。

MDN页面上的CSS定义基于W3C官方文档。 MDN贡献者(人员)读取,过滤和解释W3C数据以在MDN上呈现。因此,MDN信息容易受到人为错误的影响。这就是这里的问题。

如果直接查看规范,则会找到正确的信息:



好的。因此,让我们转到justify-self



如前所述,justify-itemsjustify-self不适用于 flex 商品。

还要注意justify-itemsjustify-self适用于多个Box模型,而不仅仅是CSS Grid。有关更多详细信息,请参见CSS Box Alignment Module specification

10-06 04:20