具有相同“订单”值的元素是否有效？

Question

我正在使用CSS order属性来重新排序Flexbox容器中的元素。

我希望在此列表的末尾添加一些元素，因此我使用的是order: 1000，它远远高于其他任何内容的顺序。

我不关心这些“结束”元素相对于彼此的顺序，但我不确定是否有一大堆带有order: 1000的元素是有效的。

我在规范中找不到任何相关内容。这有效/合法吗？

Answer 1

CSS中从不存在一种情况，即属性共享相同值的多个元素被视为“无效”。 CSS没有以这种方式定义有效性。正如Justinw在评论中提到的那样，因为每个元素至少具有每个CSS属性的初始值，除非浏览器默认值或您指定，CSS需要为每个属性考虑这种情况。

对于order属性，根据源顺序布置两个具有相同值的弹性项，如in section 5.4 of the spec所述。也就是说，在具有order: 1000的两个弹性项目之间（或两个具有order: 1的弹性项目，或者甚至是初始值0），来自源头的第一个标记（假设DOM树在事后没有被操纵）将根据flex-direction指定的方向在最后一个之前布置。

这是确切的引用：

  

具有相同序号组的项目按其在源文档中出现的顺序排列。这也会影响painting order [CSS21]，就像在源文档中重新排序flex项一样。

这类似于具有相同z-index计算值的两个元素按源顺序从前到后绘制（参见section 9.9 of CSS2.1）。

Answer 2

  

具有相同order值的元素是否有效？

是。实际上，默认情况下，所有弹性项都具有相同的order值。 Flex容器的初始设置为order: 0。这意味着所有弹性项目（无论是1还是1000）都将具有相同的order值，直到被覆盖。

  

我不关心这些＆＃34;结束＆＃34;的顺序。元素相对于彼此，但我不确定是否有一大堆order: 1000元素是有效的。

如果您正在谈论达到可能的order值的上限，您可以放心地假设没有。{p>如果容器中有5,000个弹性项，该怎么办？

容器中可存在的元素数量没有法律限制。因此，不能限制order值。如果有5,000件商品，则order: 5000必须可用。