flex 布局下，怎么改变元素的顺序？

参考答案：

可以使用order属性来改变Flex布局下元素的顺序。order属性指定了Flex容器内部各个项目的排列顺序，其默认值为0。

通过调整order属性的值，可以改变元素的顺序。具体步骤如下：

1. 将元素定义为Flex容器，使用display: flex;或者display: inline-flex;。
2. 为每个子元素设置order属性，根据需要设置不同的值，值越小的元素会在前面，值相等的元素按照文档流原始顺序排列。

以下是一个示例代码：

<div class="flex-container">
  <div class="item-1">1</div>
  <div class="item-2">2</div>
  <div class="item-3">3</div>
</div>

.flex-container {
  display: flex;
}

.item-2 {
  order: 2; /* 改变顺序 */
}

在上述代码中，通过将第二个子元素的order属性设置为2，可以将其放置在其他子元素之后。

请注意，order属性接受任意整数值，负数也可以使用。同时，当多个元素的order值相同时，它们会按照它们在文档流中的位置进行排序。

题目要点：

在 Flexbox 布局中，可以通过设置 order 属性来改变元素的显示顺序，而不需要改变 HTML 的结构。

Flexbox 布局元素顺序

• order 属性：
  • 定义元素的排序顺序。
  • 默认值是 0。
  • 数值越小，元素越靠前显示。

考察重点

• 理解：order 属性的作用和用法。
• 应用：在实际布局中灵活调整元素的显示顺序。