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

【问题标题】：What is the purpose of flex-start and flex-end on justify-items and justify-self?justify-items 和 justify-self 上的 flex-start 和 flex-end 的目的是什么？
【发布时间】：2018-03-25 09:45:29
【问题描述】：

据我所知，justify-items 和 justify-self CSS 属性在 CSS Grid 布局中使用，在 Flexbox 布局中没有任何影响（不像名称相似但不同的justify-content 属性）。事实上，MDN 在justify-items 和justify-self 的文档中都说

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

在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 等浏览器的开发者工具中显示为自动完成建议。

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

【问题讨论】：

标签： css flexbox css-grid

【解决方案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

此属性指定所有的默认justify-self 参与此框的子框（包括匿名框）格式化上下文。

好的。所以我们去justify-self。

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

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

如上所述，justify-items 和 justify-self 不适用于弹性项目。

还要注意justify-items 和justify-self 适用于多个盒子模型，而不仅仅是 CSS Grid。更多详情请参阅CSS Box Alignment Module specification。

【讨论】：

这真是令人困惑，因为即使是 Chrome suggests flex-start 对 justify-self 也是如此——而且他们必须实施规范。
是的，看起来像一个悬而未决的问题。只需使用 auto 边距即可。 @mpen

【解决方案2】：

规范确实实际上规定这些是有效的justify-items 和justify-self 值。它将justify-items 的合法值列出为：

正常 |拉伸| <baseline-position> | <overflow-position>? [<self-position>|离开 |对] |遗产 |遗产 && [ 左 |对 |中心]

并将<self-position> 定义为：

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

我不确定，但我推测这些可能的值作为justify-self 和justify-items 的可能值而没有太多考虑，仅仅是因为它们是规范中<self-position> 类别的一部分。

无论如何，flex-start 规范说：

弹性启动

仅用于弹性布局。 [CSS-FLEXBOX-1] 将alignment subject 对齐，使其与alignment container 的边缘齐平，对应于flex container 的主开始或交叉开始侧，视情况而定。

在flex formatting context 之外使用时，此值的行为与start 相同。也就是说，在不是flex items 的盒子上（或伪装成弹性项目，例如在确定作为flex container 的子项的绝对定位盒子的静态位置时），这个值在使用时表现为start在 self-alignment 属性中，以及在不是 flex 容器的盒子上，当在 content-distribution properties 中使用时，此值的行为类似于 start。

（flex-end 也有类似的措辞。）

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

这个值相当于开始。

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

#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>

当然，没有充分的理由在不太容易混淆的start 和end 值上使用它们，所以不要。但这就是他们所做的，也是浏览器支持它们的原因。

另一方面，在撰写本文时，MDN 关于这些值的含义的文档相当混乱且自相矛盾。我稍后会修复它，希望在您阅读本文时，它会更清晰。

【讨论】：