Flexbox 的各种属性详解

# 第一章：Flexbox 基础概念

## 1.1 什么是Flexbox

Flexbox是一种用于布局设计的CSS3模块，它提供了一种更加高效的方式来对齐、增长和分配容器中的空间和项目。通过使用Flexbox，可以更轻松地实现响应式设计并创建灵活的布局。

## 1.2 Flex容器和Flex项

Flexbox布局由一个包含了一系列子元素的Flex容器和这些子元素本身组成。Flex容器是指应用了`display: flex` 或 `display: inline-flex` 属性的元素，而其直接子元素则成为Flex项。

## 1.3 Flexbox的主轴和交叉轴

在Flexbox布局中，沿着容器的主要方向（主轴）排列项目，并且可以根据需要将项目进行换行。同时，也存在与主轴垂直的交叉轴，它是与主轴垂直的那个轴。
## 第二章：Flex容器属性

Flex容器是包含Flex项的父元素，通过设置Flex容器的属性来控制和调整Flex项的布局。下面将详细介绍Flex容器的各项属性。

### 2.1 display

`display` 属性用来定义一个元素是否为 Flex 容器，可选值包括 `flex` 和 `inline-flex`。当一个元素被设置为 `flex` 后，它的子元素会自动成为 Flex 项，从而可以使用 Flexbox 的布局特性。

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

### 2.2 flex-direction

`flex-direction` 属性决定了 Flex 容器的主轴方向，可选值包括 `row`、 `row-reverse`、 `column` 和 `column-reverse`。其中 `row` 表示主轴是水平方向，起点在左端，`column` 表示主轴是垂直方向，起点在顶部。

.container {
  flex-direction: row; /* 或者 flex-direction: column; */
}

### 2.3 flex-wrap

`flex-wrap` 属性定义了 Flex 容器中的 Flex 项是否换行，可选值包括 `nowrap`、 `wrap` 和 `wrap-reverse`。默认情况下，Flex 项不会换行。

.container {
  flex-wrap: nowrap; /* 或者 flex-wrap: wrap; */
}

### 2.4 flex-flow

`flex-flow` 属性是 `flex-direction` 和 `flex-wrap` 两个属性的缩写形式，可以同时设置它们的值。

.container {
  flex-flow: row nowrap; /* 等同于 flex-direction: row; flex-wrap: nowrap; */
}

### 2.5 justify-content

`justify-content` 属性定义了 Flex 项沿着主轴的对齐方式，可选值包括 `flex-start`、 `flex-end`、 `center`、 `space-between` 和 `space-around`。

.container {
  justify-content: flex-start; /* 或者 justify-content: center; */
}

### 2.6 align-items

`align-items` 属性定义了 Flex 项沿着交叉轴的对齐方式，可选值包括 `flex-start`、 `flex-end`、 `center`、 `baseline` 和 `stretch`。

.container {
  align-items: flex-start; /* 或者 align-items: stretch; */
}

### 2.7 align-content

`align-content` 属性定义了多根轴线的对齐方式，仅在存在多根轴线的情况下生效，可选值包括 `flex-start`、 `flex-end`、 `center`、 `space-between`、 `space-around` 和 `stretch`。

.container {
  align-content: flex-start; /* 或者 align-content: stretch; */
}

### 第三章：Flex项属性

#### 3.1 order

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

.item1 {
  order: 1;
}

.item2 {
  order: 2;
}

.item3 {
  order: -1;
}

#### 3.2 flex-grow

`flex-grow`属性定义了在剩余空间中F