利用Flexbox实现等高列布局

# 1. 简介

## 1.1 什么是Flexbox？

弹性盒模型（Flexbox）是CSS3的一种布局模式，旨在使容器内的子元素能够更加容易地进行布局、对齐和分布空间，特别适用于各种复杂的布局方式。

Flexbox布局是基于“盒模型”的理念，其中容器内的子元素可以按照灵活的尺寸分布在容器内部，以填充并收缩或扩张到适当的可用空间。

## 1.2 为什么使用Flexbox实现等高列布局？

传统布局中，实现等高列布局需要使用额外的辅助元素或者JavaScript来实现。而Flexbox可以通过简明的CSS代码，实现完全自适应的等高列布局，无需依赖额外元素或代码。

Flexbox布局的优势在于其能够轻松实现灵活的布局方式，避免了传统布局方式所需的复杂计算及多余代码，同时也能够更好地适应不同大小设备的屏幕布局。

# 2. Flexbox基础

弹性盒布局(Flexible Box Layout)或者称为Flexbox，是一种用于页面布局的新型CSS3布局模型。在实现等高列布局中，Flexbox是一种非常强大、灵活且便捷的工具。本章节将介绍Flexbox的基础知识，包括Flex容器与Flex项目，主轴与侧轴，以及Flex属性的基本概念。

### 2.1 Flex容器与Flex项目

在Flexbox布局中，包含Flex项目的容器称为Flex容器，而Flex容器内的每个子元素称为Flex项目。要将一个元素设置为Flex容器，只需将其 `display` 属性的值设置为 `flex` 或 `inline-flex`。

.container {
    display: flex; /* 将.container设置为Flex容器 */
}

.item {
    /* 每个.item都是Flex项目 */
}

### 2.2 主轴与侧轴

Flexbox布局中有主轴和侧轴的概念，这取决于Flex容器的主轴方向，主轴是Flex项目排列的方向，而侧轴则是垂直于主轴的方向。主轴的起点称为"main start"，终点为"main end"；侧轴的起点称为"cross start"，终点为"cross end"。

.container {
    flex-direction: row; /* 主轴水平，起点在左侧，终点在右侧 */
    /* 其他可能值：column, row-reverse, column-reverse */
}

### 2.3 Flex属性的基本概念

Flex属性用于控制Flex项目的伸缩能力，包括 `flex-grow`、`flex-shrink` 和 `flex-basis`。其中：
- `flex-grow`：定义项目的放大比例，默认为0，即不放大。
- `flex-shrink`：定义项目的缩小比例，默认为1，即允许缩小。
- `flex-basis`：定义项目在分配多余空间前的基准值。

.item {
    flex: 1; /* 简写形式，相当于 flex: 1 1 auto; */
}

以上是Flexbox布局的基础知识，理解这些概念将有助于实现等高列布局。接下来，我们将探讨实现等高列布局的基本步骤。

# 3. 实现等高列布局的基本步骤

在利用Flexbox实现等高列布局时，我们需要按照以下基本步骤进行操作：

#### 3.1 设定Flex容器

首先，我们需要将父容器设置为Flex容器。这可以通过在CSS中为父容器添加 `display: flex;` 属性来实现。这样子容器中的子元素就可以按照Flexbox的规则进行布局。

.container {
    display