如何仅使用 CSS 更改 flex box 中的顺序答案

【问题标题】：How to change order in flex box with just CSS如何仅使用 CSS 更改 flex box 中的顺序
【发布时间】：2022-11-22 00:39:18
【问题描述】：

有没有办法只用 CSS 来改变弹性盒子的孩子的顺序？

<div> flex 2 </div> <div> flex 3 </div> <div style="flex-order:-1"> flex 1 </div>

【问题讨论】：

标签： css

【解决方案1】：

你可以使用属性order .div1 { order: 0; }

但要让它发挥作用，你应该对所有孩子的

您现在还应该：0 用于第一个位置，1、2 等等用于其他位置

【讨论】：

【解决方案2】：

您可以使用 order 属性示例：

order: 1;
order: 2;
order: 4;
order: 3;

您可以在MDN documentation 中找到更多信息

【讨论】：

【解决方案3】：

有这样的 HTML 代码：

<div class="wrapper">
  <div class="item-2">Flex 2</div>
  <div class="item-3">Flex 3</div>
  <div class="item-1">Flex 1</div>
</div>

如果要更改特定项目的顺序，可以使用命令像这样的属性：

.wrapper {
  display: flex;
}

.item-1 {
  order: 1;
}

.item-2 {
  order: 2;
}

.item-3 {
  order: 3;
}

此代码将重新排序元素：Flex 1 - Flex 2 - Flex 3。

但是，如果您想同时更改所有项目的顺序，只需使用弹性方向在包装纸上：

.wrapper {
  display: flex;
  flex-direction: row-reverse;
}

此代码将重新排序元素：Flex 1 - Flex 3 - Flex 2。

【讨论】：