如何使用CSS Flex属性调整Flex项目的排列顺序

现有代码情况 #

CSS代码 #

.container {
  display: flex;
}
.item {
  width: 100px;
  height: 100px;
}

HTML代码 #

<div class='container'>
  <div class='item' style="background:red;"></div>
  <div class='item' style="background:blue;"></div>
  <div class='item' style="background:green;"></div>
</div>

当前元素顺序是红、蓝、绿，要改成蓝、红、绿，用Flex的order属性就能实现，下面是两种简单方法：

方法一：直接加内联样式修改order #

默认所有flex子元素的order值都是0，数值越小排得越靠前。只要给红色元素设order:1，蓝色元素保持默认的0，蓝色就会跑到红色前面：

<div class='container'>
  <div class='item' style="background:red; order:1;"></div>
  <div class='item' style="background:blue;"></div>
  <div class='item' style="background:green;"></div>
</div>

方法二：用CSS类统一管理顺序 #

如果需要调整多个元素，建议用类来设置order，更便于维护：
先修改CSS，新增两个控制顺序的类：

.container {
  display: flex;
}
.item {
  width: 100px;
  height: 100px;
}
.order-first {
  order: 0;
}
.order-second {
  order: 1;
}

然后在HTML里给对应元素加类：

<div class='container'>
  <div class='item order-second' style="background:red;"></div>
  <div class='item order-first' style="background:blue;"></div>
  <div class='item' style="background:green;"></div>
</div>

原理很简单：order属性决定了flex容器内元素的排列优先级，值小的先排。红色元素order设为1，比蓝色的0大，所以蓝色会排在红色前面，绿色保持默认0，自然留在最后，最终顺序就是蓝、红、绿。

内容的提问来源于stack exchange，提问作者Sagar Mavai