在自证项目和自证项目上灵活启动和灵活结束的目的是什么？

Question

据我所知，CSS网格布局中使用了justify items和justify selfCSS属性，在Flexbox布局中没有任何效果（与名称相似但不同的justify content属性不同）。事实上，MDN在文档中对justify items和justify self都说

在flexbox布局中，此属性将被忽略

并且在Flexbox中的框对齐页面上有一整节标题为Flexbox中没有自我证明。

然而，奇怪的是，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）的开发工具中显示为自动完成建议。

如果在Flexbox布局中忽略了justify items和justify self，为什么会存在这些值？它们是特殊的吗？他们是干什么的？

Answer 1

规范确实规定了这些是有效的证明项和证明自我值。它列出了证明项目的合法值如下：

正常|拉伸|

并定义

<self-position> = center | start | end | self-start | self-end |
       flex-start | flex-end

我不确定，但我推测这些可能的值被拉进来作为可能的值为证明自我和证明项目没有太多的考虑仅仅是因为它是的一部分

无论如何，flex startspec说明：

仅用于灵活布局。[CSS-FLEXBOX-1]将对准对象与对应于柔性容器主启动侧或交叉启动侧的对准容器的边缘齐平。

在flex格式上下文之外使用时，此值的行为与start相同。也就是说，在非柔性项的框上（或假装为柔性项，例如在确定绝对定位框的静态位置时，该框是柔性容器的子对象），在自对齐属性中使用此值时，以及在非柔性容器的框上，此值的行为与开始相同，在内容分发属性中使用此值时，其行为与“开始”相同。

（对于柔性端，有类似的措辞）

如果我们谈论的是证明-项目或证明-自我属性，那么，如果它们没有被忽略，我们保证不会处于灵活格式化上下文中，因此总是这样：

此值表现为start。

我们可以在简单的网格布局中看到这一点：

#grid {
    display: grid;
}
#item1 {
  justify-self: flex-start;
}
#item2 {
  justify-self: flex-end;
}

<div id="grid">
    <div id="item1">flex-start</div>
    <div id="item2">flex-end</div>
</div>

Answer 2

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

考虑你的信息来源：MDN Web文档（以前是Mozilla开发者网络）。这一资源虽然通常是有用和可靠的，但仍然代表着二手信息。

MDN页面上的CSS定义基于W3C官方文档。MDN贡献者（人员）读取、过滤和解释W3C数据，以便在MDN上进行演示。因此，MDN信息可能会出现人为错误。这就是问题所在。

如果您直接进入规范，您将找到正确的信息：

7.1. 内联/主轴对齐：justify items属性

此属性为参与此框的格式化上下文的所有子框（包括匿名框）指定默认的证明自我。

好的。因此，让我们转到证明自我。

6.1. 内联/主轴对齐：justify self属性

适用于：块级别框、绝对定位框和网格项

如前所述，证明-项目和证明-自我不适用于flex项目。

还请注意，justify items和justify self适用于多框模型，而不仅仅是CSS网格。有关更多详细信息，请参见CSS框对齐模块规范。