Flexbox项目的加权或相对排序。

Question

据我了解，flexbox css 属性中的order是绝对的，即在具有 order：0 的 flex 容器中，最后一个元素会升至顶部。

我希望能够提升 flex 容器中的某些元素，使它们不会上升到确切的位置，而是通过一定数量的元素上移，例如将元素上移至前一个元素之上。

澄清一下：

<div>A</div>
<div>B</div>
<div>C</div>
<div style="order: -1">This should go up by one, between B and C</div>

当然，那种样式会将最后一个元素移动到顶部，而不是我想要它呆的位置。

有没有一种只使用CSS就能实现这个效果的方法？

---

显然我是在问不可能的事情。既然我可能需要这种排序方式，我就必须在javascript中创建一个排序系统，动态更改子元素的order属性。我已经有了思路，但还没有清晰到能够用语言表述。

值得一提的是，这是为布局编辑器设计的，将导出纯HTML和CSS。Javascript仅用于编辑器而非发布网站。否则，重新排序实际元素就足够了，但在某些情况下，需要为不同的设备优先考虑特定元素。

最终我会用自己想出的方法回答这个问题，但在此期间，请随意添加您自己的建议并获得被采纳答案的积分：）

- jpeltoniemi

---

如果只有两个元素，您可以颠倒顺序，但我认为那是目前最好的选择。 - Danield

@Danield 看起来是这样的。 - jpeltoniemi

你找到这个问题的解决方案了吗？我想使用它来交换每4个项目中的第2个和第3个。（1 3 2 4 - 5 7 6 8 - 9 11 10 12 - 13 15 14 16） - Janneman96

@Janneman96 抱歉，这是一个旧问题，我记不得我最终做了什么。我猜解决方案涉及 JavaScript。 - jpeltoniemi

如果使用Javascript，那么最好为每个元素赋予一个明确的顺序（基于循环的索引），而不是不设置任何顺序（这会将每个元素默认为“0”）。然后，当需要相对移动一个元素时（例如+1），您只需获取它的顺序并相应地添加或减去即可。 - Kalnode

Answer 1

这是一个CSS-only的解决方案，使用了CSS的var()和calc()。 Codepen 步骤1：为所有项目明确指定索引 当我们呈现列表时，我们确保在列表中的每个项目中明确设置一个索引（否则如果没有设置，则默认为“0”）。我们使用CSS变量来实现，因为它在CSS计算中更容易访问；否则，我们可能会使用attr()，但这更多是JS逻辑的选项。

<div id="wrapper">
  <!-- Each item has an explicit CSS var defined -->
  <div style="--data-myIndex:0;">A</div>
  <div style="--data-myIndex:1;">B</div>
  <div style="--data-myIndex:2;">C</div>
  <div style="--data-myIndex:3;">D</div>
  <div style="--data-myIndex:4;">E</div>
  <div style="--data-myIndex:5;">F</div>
  <div style="--data-myIndex:6;">G</div>
</div>

<style>
#wrapper > * {
  margin: 1em;
  padding: 1em;
  background-color: #EEEEEE;
  
  /* We set the order based on the CSS var myIndex (set in HTML) */
  order: var(--data-myIndex);
}
</style>

步骤二：相对移动项目

当所有项目都有明确的索引后，我们可以使用 calc() 中的索引值以相对方式移动特定项目（例如 +/- x）。

<style>
@media(max-width: 768px) {
  
     /* Shift a specific element (e.g. 3rd) by some number (e.g. 2); we use the index inside calc to do a relative shift! */
    #wrapper div:nth-child(3) {
      order: calc(var(--data-myIndex) + 2);
      background-color: #AAAAAA;
    }
}
</style>

在这个使用案例中，我是在一个断点处进行操作的。在移动视图中，我们通过相对量来移动特定的项。这只有在每个元素都有明确索引的情况下才能实现。

如果你更喜欢使用JS，你也可以在JS中执行此移位。如果使用JS，你可以在元素上使用数据属性而不是CSS变量。

- Kalnode