css - 如何更改 flex 包装器中第二行的顺序？

Question

是否可以更改 flexbox 包装器中第二行项目的顺序？

如果可能，怎么做？

我需要实现这个分布——而不用 javascript 改变顺序。

1 2 3
6 5 4

首先，我只需要更改第二行，但最终，对于较小的屏幕，它应该会影响遵循此标准的所有偶数行（右侧示例）：

->->->         1  2  3    -     1  2
<-<-<-         6  5  4    -     4  3
->->->         7  8  9    -     5  6
<-<-<-        12 11 10    -     8  7
...

我更喜欢使用 flex 来使最终的最后一个孤立项目居中，但如果这有助于解决问题，我可能会使用网格。

这是基本代码的示例：

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

ul,li { margin: 0; padding: 0; list-style: none; }
ul { display: flex; flex-wrap: wrap; }
ul li { flex-basis: calc((100% / 3) - 6px); }

还有一个可以玩的代码笔： https ://codepen.io/romualdinho/pen/pogEOXz

谢谢！

标签： cssflexboxgrid