如果元素具有相同的顺序整数，那么 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：

一个弹性容器以修改过的文档顺序#排列其内容，从编号最小的序数组开始向上。具有相同序数组的项目按照它们在源文档中出现的顺序排列。

将此与您指定column-reverse 的事实结合起来，我会说“蓝色”在“红色”之前，因为这是它们在您的文档中出现的“反向顺序”。

“银色 > 粉色 > 金色”也是如此，它们都有 order 和 2，因此它们在文档中的显示顺序是相反的。

最后，order 和 0 的项目也是如此。