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

【问题标题】：Is it possible to change the order of list items using CSS3?是否可以使用 CSS3 更改列表项的顺序？
【发布时间】：2017-01-06 03:54:01
【问题描述】：

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

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

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

HTML 代码

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>

【问题讨论】：

您可以使用带有 order 属性的 CSS 来完成此操作，如下面的解决方案中所示，但我个人不喜欢它，因为您无法动画/过渡订单的更改。
@Noitidart 首先，喜欢你的代码。你的忠实粉丝。总是印象深刻。 :-) 其次，你有什么推荐的？
感谢@RockPaperLizard！我真的很感激那张纸条！我使用反应，所以这对我来说很容易在几分钟内敲定，但如果没有 ui/组件套件，可能需要更多时间。我使用块级元素和transformY。修改 perf 的转换很好，因为它不会导致重绘。

标签： html css firefox firefox-addon

【解决方案1】：

你可以使用 flexbox 来做到这一点。

这是我为您创建的小提琴：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>

根据csstricks：

order 属性是灵活框布局模块的子属性。

默认情况下，弹性项目的显示顺序与它们在源文档中的显示顺序相同。

order 属性可用于更改此排序。

语法：

订购：number

希望对您有所帮助。干杯！

【讨论】：

很好的答案。谢谢！ Leo 的答案使用flex-flow: wrap 而您选择了flex-direction: column。哪个是更好的选择？还是作为另一个问题更好？
基本上，我选择了 flex-direction 而不是 flex-flow，因为 flex-flow 是 flex direction 和 wrap 的简写。如果我没有记错的话。我只是根据你的需要。但这几乎是一样的。您不需要包装元素。 Leo的回答和我的差不多。所以，我们很棒：D

【解决方案2】：

是的，您可以使用弹性盒子模型的order css 属性。请注意，父元素必须设置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>

另外请注意，并非所有浏览器都支持此处所述的灵活框模型...http://caniuse.com/#feat=flexbox

但是，如果您需要支持旧版浏览器，可以使用很多 polyfill 来支持旧版浏览器

【讨论】：

很好的答案。谢谢！ Herm Luna 的答案使用flex-direction: column，而您选择了flow-flow: wrap。哪个是更好的选择？还是作为另一个问题更好？
好吧，在您的问题的上下文中，关于项目的顺序并不重要。这完全取决于您希望如何布局项目，您将使用适当的值 flex-wrap 或 flex-direction...flex-flow 只是上述属性的简写...类似于@987654331 @ 代表font-size、font-weight...或border 代表border-width、border-style 等
谢谢利奥。你的回答和 Herm Luna 的回答都是一流的。我将接受 Herm Luna 的回答，因为我最终使用了 flex-direction: column 并且因为他/她的代表较低。但我也向您表示诚挚的感谢和感谢，这比代表更有价值！非常感谢您的帮助！
@RockPaperLizard 酷！很高兴我能提供帮助，我刚刚对他/她的回答投了赞成票

【解决方案3】：

如果您只需要反向，请使用：

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

【讨论】：