Flexbox布局：使用order属性重新排列元素

# 1. 引言

## 1.1 什么是Flexbox布局

Flexbox布局（即Flexible Box布局）是CSS3中引入的一种新的布局模型，用于实现灵活且自适应的网页布局。它可以让开发者更轻松地处理元素的布局问题，尤其适用于构建响应式布局。

Flexbox布局基于一个容器（Flex容器）和其中的项目（Flex项目）的概念。容器可以设置为Flex布局模式，以便通过一系列属性控制项目在容器内的排列与对齐方式。而项目则可以设置各种属性来调整它们在容器内的位置和尺寸。

## 1.2 order属性的作用

order属性是Flexbox布局中的一个重要属性，用于控制Flex项目的排列顺序。每个Flex项目都有一个默认的order值为0，通过调整order值可以改变项目在容器内的排列顺序。

order属性可以使用整数值来指定项目的排序顺序，值越小的项目排在越前面。如果多个项目具有相同的order值，则它们的实际排列顺序会按照它们在HTML结构中的先后顺序。

在Flexbox布局中，通过调整order属性，我们可以实现简单而强大的元素重新排列效果，从而快速满足不同布局需求。

# 2. Flexbox基础知识回顾

Flexbox是一种用于布局的CSS模块，它提供了一种灵活的方式来对容器中的项目进行排列和对齐。在使用Flexbox布局时，首先需要理解以下几个基本概念：

### 2.1 Flex容器与Flex项目的概念

- **Flex容器**：指定了一个容器元素，该容器元素的所有子元素会参与到Flexbox布局中。通过设置容器元素的`display`属性为`flex`或`inline-flex`，即可将其划定为Flex容器。

- **Flex项目**：Flex容器中的每个子元素都是一个Flex项目，它们根据Flex容器的主轴和交叉轴进行排列和对齐。

### 2.2 Flexbox的主轴与交叉轴

- **主轴**：Flexbox布局中，Flex容器的主要排列方向被称为主轴。默认情况下，主轴是水平方向（左到右），但也可以通过设置容器元素的`flex-direction`属性来改变主轴方向（例如，设置为`column`可以使主轴变为垂直方向）。

- **交叉轴**：与主轴垂直的轴称为交叉轴。默认情况下，交叉轴是垂直方向（从上到下），但也可以通过设置容器元素的`flex-direction`属性来改变交叉轴方向（例如，设置为`column`可以使交叉轴变为水平方向）。

### 2.3 Flexbox的常用属性

下面是一些常用的Flexbox属性：

- **`flex-direction`**: 定义Flex容器的主轴方向，默认值为`row`（水平方向，从左到右），可选值有`row-reverse`（水平方向，从右到左）、`column`（垂直方向，从上到下）、`column-reverse`（垂直方向，从下到上）。

- **`flex-wrap`**：定义Flex容器中的项目是否换行，默认值为`nowrap`（不换行），可选值有`wrap`（换行）和`wrap-reverse`（反向换行）。

- **`justify-content`**：定义Flex容器中的项目在主轴上的对齐方式，默认值为`flex-start`（起点对齐），可选值有`flex-end`（终点对齐）、`center`（居中对齐）、`space-between`（两端对齐，项目之间间隔相等）、`space-around`（项目两侧间隔相等）。

- **`align-items`**：定义Flex容器中的项目在交叉轴上的对齐方式，默认值为`stretch`（拉伸对齐），可选值有`flex-start`（起点对齐）、`flex-end`（终点对齐）、`center`（居中对齐）、`baseline`（基线对齐）。

- **`align-content`**：定义Flex容器中的行（多行）在交叉轴上的对齐方式，默认值为`stretch`（拉伸对齐），可选值有`flex-start`（起点对齐）、`flex-end`（终点对齐）、`center`（居中对齐）、`space-between`（两端对齐，行之间间隔相等）、`space-around`（行两侧间隔相等）。

以上就是Flexbox布局的基础知识回顾，了解这些基本概念和属性将对后续学习使用order属性进行元素重新排列的内容有很大帮助。在接下来的章节中，我们将重点介绍order属性的作用和用法。

# 3. 使用order属性重新排列元素的原理

#### 3.1 order属性的介绍

在Flexbox布局中，order属性用于指定Flex项目的排列顺序。默认情况下，Flex项目的order属性值为0，可以为正数、负数或0。值越小，排列越靠前。

#### 3.2 order属性的取值和应用场景

order属性