具有相同"订单"值的元素是否有效?

mar*_*are 2 css duplicates css3 flexbox

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

我想在这个列表的末尾添加一些元素,所以我使用的order: 1000是远远超过其他任何东西的顺序.

我不关心这些"结束"元素相对于彼此的顺序,但我不确定是否有一大堆元素order: 1000是有效的.

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

Bol*_*ock 6

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

order属性的情况下,根据源顺序布置具有相同值的两个弹性项目,如规范的5.4节中所述.也就是说,在两个flex项目之间order: 1000(或者两个flex项目order: 1,或者甚至是0该事项的初始值),在源标记中首先出现的那个(假设DOM树在事后没有被操纵)根据指定的方向,将在最后一个之前布置flex-direction.

这是确切的报价:

具有相同序数组的项目按它们在源文档中出现的顺序排列.这也会影响绘制顺序 [CSS21],就像在源文档中重新排序弹性项一样.

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