Question

据我所知，return 3 >>= \var -> (... return (var +3)) >>= \var -> ..,仅在 CSS网格中使用，但有justify-items和flex-start的值。

在哪些情况下使用它们？

Answer 1

这是一个错误。 <span ng-if="value == a"></span>和justify-items属性不适用于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-self和justify-items不适用于弹性项目。

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

Answer 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规范说：

flex-start

仅用于弹性布局。 [CSS-FLEXBOX-1]根据需要将alignment subject与alignment container的边缘对齐，与flex container的主起点或交叉起点相对应。

在flex formatting context之外使用时，此值的行为与start相同。也就是说，在非flex items的盒子上（或假装为弹性项目，例如当确定绝对位置的盒子的静态位置时，该绝对位置的盒子是flex container的子元素），该值的行为在self-alignment属性中使用时作为开始，并且在非flex容器上的盒子上，在content-distribution properties中使用时，此值与开始时一样。

（flex-end有类似的用语。）

如果我们谈论的是justify-items或justify-self属性，那么，如果不忽略它们，我们可以保证 not 为flex格式上下文，因此总是是这样的情况：

此值代表开始。

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

#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关于值的含义的文档相当混乱且自相矛盾。一会儿我会修复它，希望当您阅读本文时，它会更加清晰。

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

2 个答案:

flex-start