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

Question

据我所知，justify-items and justify-self CSS properties are used in CSS Grid layouts, and don't have any effect in Flexbox layouts (unlike the similarly-named but different 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 等浏览器的开发人员工具中显示为自动完成建议。 =30=]

如果 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 不适用于弹性商品。

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

Answer 2

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

normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ] | legacy | legacy && [ left | right | center ]

并将<self-position>定义为：

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

我不确定，但我推测这些可能的值只是因为是 <self-position> 规范中的类别。

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

flex-start

Only used in flex layout. [CSS-FLEXBOX-1] Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the flex container’s main-start or cross-start side, as appropriate.

When used outside of a flex formatting context, this value behaves as start. That is, on boxes that are not flex items (or pretending to be flex items, such as when determining the static position of an absolutely-positioned box that is a child of a flex container), this value behaves as start when used in the self-alignment properties, and on boxes that are not flex containers, this value behaves as start when used in the content-distribution properties.

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

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

this value behaves as 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>

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

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

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

What is the purpose of flex-start and flex-end on justify-items and justify-self?

css

flexbox

css-grid

flex-start