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：

Flex容器按顺序修改的文档顺序＃列出其内容，从最低编号的序数组开始并向上。具有相同序数组的项目按它们在源文档中出现的顺序排列。

将此与您指定column-reverse的事实相结合，我会说＆＃34; Blue＆＃34;来之前＆＃34; Red＆＃34;因为＆＃34; 反向顺序＆＃34;它们出现在您的文档中。

同样适用于＆＃34; Silver＆gt;粉红色＆gt; Gold＆＃34;，它们都order 2，因此它们在文档中的顺序相反。

最后，同样适用于order 0的商品。

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

1 个答案: