html - 如果元素具有相同的顺序整数，flex 的顺序如何决定应该如何排序？

Question

情况如下:

<section class="filters">
  <ul>
    <li>Color:
      <ul>
        <li style="order: 4;">Red (4)</li>
        <li style="order: 4;">Blue (4)</li>
        <li style="order: 0;">White (0)</li>
        <li style="order: 2;">Gold (2)</li>
        <li style="order: 1;">Purple (1)</li>
        <li style="order: 2;">Pink (2) </li>
        <li style="order: 2;">Silver (2)</li>
        <li style="order: 0;">Black (0)</li>
        <li style="order: 0;">Brown (0)</li>
        <li style="order: 1;">Yellow (1)</li>
      </ul>
    </li>
  </ul>
</section>

CSS:

.filters ul li ul {
  display: flex;
  flex-direction: column-reverse;
}

结果:

• 颜色:
  • 蓝色 (4)
  • 红色 (4)
  • 银牌 (2)
  • 粉色 (2)
  • 金牌 (2)
  • 黄色 (1)
  • 紫色 (1)
  • 棕色 (0)
  • 黑色 (0)
  • 白色 (0)

它如何决定蓝色应该在红色之前？我可以接受的银色、绿色和黑色:按字母顺序排列。但为什么它在红色之前排序蓝色，即使两者的顺序都是 4？

JSFiddle:http://jsfiddle.net/wf4fu13v/2/

Answer 1

具有相同order 的元素按文档顺序出现(尽管您还指定了相反的方向)。

来自 the relevant spec :

A flex container lays out its content in order-modified document order#, starting from the lowest numbered ordinal group and going up. Items with the same ordinal group are laid out in the order they appear in the source document.

结合您指定 column-reverse 的事实，我会说“Blue”出现在“Red”之前，因为这是“reverse order”它们出现在您的文档中。

“Silver > Pink > Gold”也是如此，它们的order 都是2，因此它们在文档中的顺序相反。

最后，同样适用于 order 为 0 的元素。