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

Question

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

有些元素我想放在这个列表的末尾，所以我使用 order: 1000 ，远远高于其他任何东西的顺序。

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

我在规范中找不到任何相关信息。这是有效/合法的吗？

Answer 1

在 CSS 中，永远不会出现多个元素共享同一属性值被视为“无效”的情况。 CSS 不以这种方式定义有效性。正如 justinw 在评论中提到的那样，由于每个元素至少具有每个 CSS 属性的初始值，除非浏览器默认值或您另有指定，CSS 需要为每个属性考虑这种情况。

在 order 属性的情况下，具有相同值的两个 flex 元素根据源顺序进行布局，如 in section 5.4 of the spec 所述.也就是说，在两个 order: 1000 的 flex 元素之间(或者两个 order: 1 的 flex 元素，甚至是初始值 0就此而言)，根据 flex- 指定的方向，在源代码标记中排在第一位的(假设 DOM 树在事后未被操作)将排在最后一个之前方向.

这里是准确的引用:

Items with the same ordinal group are laid out in the order they appear in the source document. This also affects the painting order [CSS21], exactly as if the flex items were reordered in the source document.

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