css - justify-items 和 justify-self 上的 flex-start 和 flex-end 的目的是什么？

Question

据我所知，justify-items和 justify-self CSS 属性用于 CSS 网格布局，不会在 Flexbox 布局中有任何影响(不同于名称相似但不同的 justify-content 属性)。事实上，MDN 在 justify-items 和 justify-self 的文档中说

In flexbox layouts, this property is ignored

在 Box Alignment in Flexbox 上有一个标题为 Flexbox 中没有 justify-self 的完整部分页面。

然而，神秘的是，justify-items文档列出了这两个可能的值:

justify-items: flex-start; /* Pack flex items from the start */
justify-items: flex-end;   /* Pack flex items from the end */

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

如果 justify-items 和 justify-self 在 Flexbox 布局中被忽略，为什么这些值存在？他们被指定了吗？他们做什么？

Answer 1

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

考虑您的信息来源:MDN Web Docs (以前的 Mozilla 开发者网络)。此资源虽然通常有用且可靠，但代表二手信息。

MDN 页面上的 CSS 定义基于官方 W3C 文档。 MDN 贡献者(人)阅读、过滤和解释 W3C 数据以在 MDN 上展示。因此，MDN 信息容易出现人为错误。这就是问题所在。

如果您直接转到规范，您会找到正确的信息:

7.1. Inline/Main-Axis Alignment: the justify-items property

This property specifies the default justify-self for all of the child boxes (including anonymous boxes) participating in this box’s formatting context.

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

6.1. Inline/Main-Axis Alignment: the justify-self property

Applies to: block-level boxes, absolutely-positioned boxes, and grid items

如前所述，justify-items 和 justify-self 不适用于 flex 元素。

另请注意，justify-items 和 justify-self 适用于多种框模型，而不仅仅是 CSS Grid。有关详细信息，请参阅 CSS Box Alignment Module specification .