Flex布局之order

order 属性控制 Flex 子元素的显示顺序，数值越小越靠前，无需修改 HTML 结构。

基本语法

.item {
  order: <integer>;  /* 整数，默认为 0 */
}

工作原理

• 默认值：0
• 数值越小，排列越靠前
• 数值越大，排列越靠后
• 相同值按 DOM 顺序排列

基本用法

.container {
  display: flex;
}

.item-1 { order: 3; }  /* 排最后 */
.item-2 { order: 1; }  /* 排第一 */
.item-3 { order: 2; }  /* 排中间 */

<div class="container">
  <div class="item-1">A</div>  <!-- 显示顺序：3 -->
  <div class="item-2">B</div>  <!-- 显示顺序：1 -->
  <div class="item-3">C</div>  <!-- 显示顺序：2 -->
</div>
<!-- 实际显示：B C A -->

常见场景

移动端导航重排

.nav {
  display: flex;
}

.logo {
  order: 1;
}

.menu {
  order: 3;
}

.search {
  order: 2;
}

@media (min-width: 768px) {
  .logo { order: 1; }
  .search { order: 2; }
  .menu { order: 3; }
}

侧边栏位置切换

.layout {
  display: flex;
}

.main {
  order: 1;
  flex: 1;
}

.sidebar {
  order: 2;
  width: 250px;
}

@media (min-width: 1024px) {
  .main { order: 2; }
  .sidebar { order: 1; }  /* 桌面端侧边栏在左 */
}

表单按钮排序

.form-actions {
  display: flex;
}

.btn-cancel {
  order: 2;
  margin-left: auto;  /* 推到右边 */
}

.btn-submit {
  order: 1;
}

组合使用

与 flex-direction 配合

.container {
  display: flex;
  flex-direction: row-reverse;  /* 反向排列 */
}

.item-1 { order: -1; }  /* 仍会排在前面 */

多层级排序

.container {
  display: flex;
}

.priority-high { order: -1; }
.priority-normal { order: 0; }
.priority-low { order: 1; }

注意事项

• order 仅影响视觉顺序，不影响 DOM 结构
• Tab 键导航仍按 DOM 顺序，可能影响可访问性
• 屏幕阅读器按 DOM 顺序读取，可能与视觉顺序不一致

/* 建议：重要的交互元素保持合理的 DOM 顺序 */
.button-primary {
  order: 1;
}
.button-secondary {
  order: 2;
}

实际案例

卡片内容重排

.card {
  display: flex;
  flex-direction: column;
}

.card-image {
  order: 1;
}

.card-title {
  order: 2;
}

.card-desc {
  order: 3;
}

.card-footer {
  order: 4;
}

<div class="card">
  <h3 class="card-title">标题</h3>      <!-- DOM 第1，显示第2 -->
  <img class="card-image" src="...">    <!-- DOM 第2，显示第1 -->
  <p class="card-desc">描述</p>         <!-- DOM 第3，显示第3 -->
  <div class="card-footer">底部</div>   <!-- DOM 第4，显示第4 -->
</div>

要点总结

• order 默认值为 0，数值越小越靠前
• 仅改变视觉顺序，不影响 DOM 和可访问性
• 适合响应式布局重排、视觉优先级调整
• 注意可访问性，交互元素应保持合理 DOM 顺序