如何用Flexbox垂直重排元素？实现.trail-title与.trail-items位置互换

嘿，我明白你现在的困扰——明明记得Flexbox能做元素重排，但设置order属性却没效果对吧？别慌，咱们先搞清楚问题出在哪，再一步步解决。

核心问题：order属性的生效前提 #

Flexbox的order属性只对同一个flex容器下的直接子元素生效，而且容器必须设置了display: flex；如果要实现垂直方向的重排，还得指定flex-direction: column（默认是水平方向的row，那order只会改变水平顺序）。

具体实现步骤 #

假设你的HTML结构是两个元素同属一个父容器：

<div class="trail-wrapper">
  <h3 class="trail-title">我是标题</h3>
  <div class="trail-items">我是项目列表</div>
</div>

你只需要给父容器和两个子元素添加以下CSS：

/* 第一步：把父容器变成垂直方向的flex容器 */
.trail-wrapper {
  display: flex;
  flex-direction: column; /* 关键！让元素垂直排列 */
}

/* 第二步：通过order属性互换位置 */
.trail-title {
  order: 2; /* 数值越大，排列越靠后 */
}

.trail-items {
  order: 1; /* 数值小的排在前面 */
}

为什么这样能行？ #

默认情况下，所有flex子元素的order值都是0，它们会严格按照HTML里的顺序排列。我们给.trail-title设为2，.trail-items设为1，就会让项目列表排在标题前面，完美实现垂直位置互换。

额外注意点 #

如果你的两个元素不在同一个flex容器里，那order肯定不会生效。所以先检查HTML结构，确保它们共享同一个父容器，并且父容器开启了flex布局哦～

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