如果元素具有相同的顺序整数,flex 的顺序如何决定应该如何排序?

How does flex's order decide how things should be ordered, if elements have the same order integer?

情况如下:

<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?

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

具有相同 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 顺序”,它们在您的文档中的显示顺序。

"Silver > Pink > Gold" 也是如此,它们都有 order2,因此它们在文档中的顺序相反。

最后,order0 的项目也是如此。