Html 是否可以使用CSS3更改列表项的顺序？

是否可以使用CSS3更改列表项的顺序

例如，如果一个列表以HTML的1,2,3,4,5顺序编码，但我希望它以5,1,2,3,4顺序显示

我正在使用CSS覆盖来修改Firefox扩展，所以我不能仅仅更改HTML

HTML代码

一,
二,
三,
四,
五,

您可以使用flexbox来完成

这是我为你制作的小提琴：

ul{
显示器：flex；
弯曲方向：立柱；
}
李：第一个孩子{
顺序：5；
}
第n个孩子（2）{
顺序：4；
}
第n个孩子（3）{
顺序：3；
}
第n个孩子（4）{
顺序：2；
}

一,
二,
三,
四,
五,

是的，您可以使用flexible box模型的

顺序

css属性。请注意，父元素必须设置

display:flex

ul{
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-moz flex；
显示：-webkit flex；
显示器：flex；
-moz-flex-flow:wrap；
-webkit-flex-flow:wrap；
柔性流动：包裹；
}
ulli{
宽度：100%
}
ul li：第n种类型（1）{
顺序：2；
}
ul li：第n种类型（2）{
顺序：3；
}
ul li：第n种类型（3）{
顺序：4；
}
ul li：第n种类型（4）{
顺序：5；
}
ul li：第n种类型（5）{
顺序：1；
}

一,
二,
三,
四,
五,

如果需要反转，请使用：

ul {
    display: flex;
    flex-direction: column-reverse;
}

---

回答得很好。非常感谢。Herm Luna的答案使用了

flex direction:column

，而您选择了

flow-flow:wrap

。哪个是更好的选择？或者，作为另一个问题，这更好吗？好吧，这在你的问题中并不重要，这是关于项目顺序的问题。这完全取决于您希望如何布局项目，您将使用适当的值

柔性包裹

或

柔性方向

。

柔性流动

仅是上述属性的简写…类似于

字体

的

字体大小

，

font-weight

…或

border

用于

边框宽度

，

边框样式

，等等。你的答案和Herm Luna的答案都是一流的。我将接受Herm Luna的回答，因为我最终使用了

flex direction:column

，并且因为他/她代表性较低。但我也向您表示衷心的感谢和感谢，这比代表更为宝贵！非常感谢你的帮助@岩石蜥蜴酷！很高兴我能帮上忙，我刚刚把他/她的答案投了更高的票。答案很好。非常感谢。Leo的答案使用了

flex-flow:wrap

而不是选择

flex-direction:column

。哪个是更好的选择？或者，作为另一个问题，这更好吗？基本上，我选择了flex方向而不是flex flow，因为flex flow是flex方向和包装的缩写。如果我没弄错的话。我只是根据你的需要。但几乎是一样的。您不需要包装元素。利奥的答案和我的几乎一样。因此，我们非常棒：DYou可以使用CSS和下面的解决方案中的

order

属性来完成，但是我个人不喜欢它，因为你不能动画/转换顺序的变化。@Noitidart首先，喜欢你的代码。你的超级粉丝。总是给人留下深刻印象。：-）第二，你推荐什么？谢谢@RockPaperLizard！我真的很感谢你的留言！我使用react，所以这对我来说很容易在几分钟内完成，但如果没有ui/组件工具包，可能需要更多的时间。我使用块级元素和

transformY

。为perf修改transform很好，因为它不会导致重新绘制。