Flexbox布局：实现列表排序

# 1. 理解Flexbox布局

## 1.1 什么是Flexbox布局？

Flexbox布局是一种用于设计网页布局的模块化解决方案，通过使用弹性盒子模型，可以实现更灵活和响应式的布局效果。传统的布局方式（如使用float和position）往往会遇到许多繁琐的问题，而Flexbox布局则通过简单的属性设置，可以轻松地实现各种复杂布局需求。

## 1.2 Flexbox布局的优势

相比传统的布局方式，Flexbox布局具有以下优势：

- 自适应性：Flexbox布局可以根据容器的大小和内容的变化自动调整布局，基本不需要手动调整样式。
- 简单易用：使用Flexbox布局只需要设置一些简单的属性，就能实现复杂的布局效果，减少了开发的复杂性。
- 可伸缩性：Flexbox布局可以自动调整元素的大小和位置，适应不同尺寸的屏幕和设备。
- 适应性强：Flexbox布局可以在不同的方向（水平或垂直）上自由排列元素，适应不同的设计需求。

## 1.3 Flexbox布局的基本概念和术语

在使用Flexbox布局之前，需要了解一些基本的概念和术语：

- 弹性容器（Flex Container）：应用了Flexbox布局的父容器。
- 弹性项目（Flex Item）：弹性容器内的子元素。
- 主轴（Main Axis）：弹性容器的方向，可以是水平方向（row）或垂直方向（column）。
- 交叉轴（Cross Axis）：与主轴垂直的方向。

以上是对Flexbox布局的基本介绍和概念解释，下面将深入探讨Flexbox布局的属性和具体用法。在接下来的章节中，将会详细介绍每个属性的作用和使用方法，并通过实例演示其效果。

# 2. Flexbox属性详解

在本章节中，我们将深入探讨Flexbox布局所涉及的各种属性，包括`display`、`flex`、`flex-direction`、`justify-content`、`align-items`、`flex-grow`、`flex-shrink`、`flex-basis`、`align-self`和 `order`。

### 2.1 display和flex属性

`display` 属性用于设置一个元素是否为弹性布局容器，取值包括 `flex` 和 `inline-flex`。其中 `flex` 会将元素设置为块级弹性容器，而 `inline-flex` 则设置为内联弹性容器。

.container {
  display: flex; /* 或 inline-flex */
}

`flex` 属性为一个复合属性，包括了 `flex-grow`, `flex-shrink` 和 `flex-basis` 这三个值的缩写写法。其中 `flex-grow` 决定项目的放大比例，`flex-shrink` 决定了项目的缩小比例，`flex-basis` 则规定了在分配多余空间之前，项目占据的主轴空间。

.item {
  flex: 1 1 50%; /* 分别设置 flex-grow, flex-shrink 和 flex-basis */
}

### 2.2 flex-direction属性

`flex-direction` 属性用于确定主轴的方向（项目的排列方向），包括 `row`（默认值，主轴为水平方向）、 `row-reverse`（主轴水平方向，但起点在末尾）、 `column`（主轴为垂直方向）、 `column-reverse`（主轴垂直方向，但起点在末尾）。

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

### 2.3 justify-content和align-items属性

`justify-content` 属性用于定义项目在主轴上的对齐方式，可取值包括 `flex-start`（默认值，左对齐）、 `flex-end`（右对齐）、 `center`（居中对齐）、 `space-between`（两端对齐，项目之间的间隔相等）、 `space-around`（每个项目两侧间隔相等）。

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

`align-items` 属性用于定义项目在交叉轴上的对齐方式，可取值包括 `stretch`（默认值，拉伸填满交叉轴）、 `flex-start`（交叉轴起点对齐）、 `flex-end`（交叉轴末尾对齐）、 `center`（交叉轴居中对齐）、 `baseline`（项目第一行文字的基线对齐）。

.container {
  align-items: stretch | flex-start | flex-end | center | baseline;
}

### 2.4 flex-grow、flex-shrink和flex-basis属性

`flex-grow` 属性定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。

`flex-shrink` 属性定义项目的缩小比例，默认为 1，即如果空间不足，项目将缩小。

`flex-basis` 属性定义了在分配多余空间之前，项目占据的主轴空间。

### 2.5 align-self和order属性

`align-self` 属性允许单个项目有与其他项目不一样的对齐方式，可取值包括 `auto`（继承父元素的 align-items 属性）、`flex-start`、`flex-end`、`center`、`baseline` 和 `stretch`。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

`order` 属性定义了项目的排列顺序。数值越小，排列越靠前，默认为 0。

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

通过学习这些属性的用法，我们可以更加灵活地使用Flexbox来创建强大的布局。在下一节中，我们将通过实例来详细说明这些属性是如何应用的。

# 3. Flexbox实现列表布局