Html 是否可以使用 CSS3 更改列表项的顺序？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39217732/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to change the order of list items using CSS3?
提问by RockPaperLizard
Is it possible to change the order of list items using CSS3?
是否可以使用 CSS3 更改列表项的顺序？
For example, if a list is coded in HTML in 1,2,3,4,5 order, but I want it to show in 5,1,2,3,4 order.
例如，如果一个列表以 1、2、3、4、5 的顺序在 HTML 中编码，但我希望它以 5、1、2、3、4 的顺序显示。
I'm using a CSS overlay to modify a Firefox extension, so I can't just change the HTML.
我正在使用 CSS 覆盖来修改 Firefox 扩展，所以我不能只更改 HTML。
HTML Code
HTML代码
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>回答by devhermluna
You can do it using flexbox.
你可以使用 flexbox 来做到这一点。
Here's a fiddle I created for you: https://jsfiddle.net/x56hayht/
这是我为您创建的小提琴：https: //jsfiddle.net/x56hayht/
ul {
display: flex;
flex-direction: column;
}
ul li:first-child {
order: 5;
}
ul li:nth-child(2) {
order: 4;
}
ul li:nth-child(3) {
order: 3;
}
ul li:nth-child(4) {
order: 2;
}<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>According to csstricks:
根据csstricks：
The order property is a sub-property of the Flexible Box Layout module.
order 属性是 Flexible Box Layout 模块的子属性。
Flex items are displayed in the same order as they appear in the source document by default.
默认情况下，Flex 项目的显示顺序与它们在源文档中的显示顺序相同。
The order property can be used to change this ordering.
order 属性可用于更改此排序。
Syntax:
句法：
order: number
命令： number
Hope it helps. Cheers!
希望能帮助到你。干杯!
回答by a_vedenin
If you need just reverse, use:
如果您只需要反向，请使用：
ul {
display: flex;
flex-direction: column-reverse;
}
回答by Leo
Yes, you can using the flexible box model's ordercss property. Be aware that the parent element must have display:flexset
是的，您可以使用弹性盒模型的ordercss 属性。请注意，父元素必须已display:flex设置
ul {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-moz-flex-flow: wrap;
-webkit-flex-flow: wrap;
flex-flow: wrap;
}
ul li {
width: 100%
}
ul li:nth-of-type(1) {
order: 2;
}
ul li:nth-of-type(2) {
order: 3;
}
ul li:nth-of-type(3) {
order: 4;
}
ul li:nth-of-type(4) {
order: 5;
}
ul li:nth-of-type(5) {
order: 1;
}<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>Also be aware that not all browsers support the flexible box model as outlined here...http://caniuse.com/#feat=flexbox
另请注意，并非所有浏览器都支持此处概述的弹性盒模型... http://caniuse.com/#feat=flexbox
However, there are quite a few polyfills out there you can use to bring support for older browsers if you need to support older browsers
但是，如果您需要支持旧浏览器，可以使用很多 polyfills 来支持旧浏览器
