如果元素具有相同的顺序整数,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)
- 红色 (4)
- 银色 (2)
- 粉色 (2)
- 黄金 (2)
- 黄色 (1)
- 紫色 (1)
- 棕色 (0)
- 黑色 (0)
- 白色 (0)
它是如何决定蓝色应该在红色之前的?我可以接受的银色、绿色和黑色:按字母顺序排列。但是为什么它在红色之前排序蓝色,即使两者的顺序都是 4?
JSFiddle:http://jsfiddle.net/wf4fu13v/2/
具有相同 order
的项目按文档顺序出现(尽管您还指定了相反的方向)。
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" 也是如此,它们都有 order
个 2
,因此它们在文档中的顺序相反。
最后,order
为 0
的项目也是如此。
情况如下:
<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/
具有相同 order
的项目按文档顺序出现(尽管您还指定了相反的方向)。
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" 也是如此,它们都有 order
个 2
,因此它们在文档中的顺序相反。
最后,order
为 0
的项目也是如此。