Flexbox布局：实现圣杯布局

# 一、 什么是Flexbox布局？

## 1.1 简介Flexbox布局

Flexbox布局是一种用于页面布局的新型CSS布局模式，它旨在提供一种更加高效的方式来对齐、分布和排列元素，从而实现各种复杂的布局结构。

## 1.2 Flexbox布局的特点

- 灵活的盒模型：使用Flexbox布局可以更加灵活地控制盒模型的尺寸、排列方式和对齐方式。
- 简化的对齐方式：Flexbox提供了多种对齐方式，可以轻松实现水平居中、垂直居中等布局效果。
- 自适应性：Flexbox布局可以根据父容器的尺寸自适应调整子元素的大小和位置，适应不同尺寸的屏幕和设备。

## 1.3 Flexbox布局中的重要概念

在Flexbox布局中，有一些重要的概念需要理解：
- Flex容器：包裹着Flex项（Flex items）的父容器，通过设置Flex容器的属性来控制Flex项的排列和对齐方式。
- Flex项：Flex容器内的子元素，它们可以根据Flex容器的属性实现灵活的布局。

## 理解圣杯布局
### 2.1 圣杯布局的定义
### 2.2 圣杯布局的优势
### 2.3 圣杯布局的应用场景
### 三、 Flexbox布局的基本概念

在开始讨论如何使用Flexbox布局实现圣杯布局之前，我们需要先了解Flexbox布局的基本概念。Flexbox布局是一种灵活的布局方式，它可以很好地适应不同尺寸的屏幕和不同大小的元素，使得页面布局更加灵活和强大。

#### 3.1 Flex容器与Flex项

- Flex容器：即设置了`display: flex`或`display: inline-flex`的父元素。作为Flex容器的元素可以通过一系列的属性来控制其内部的Flex项的布局方式。

- Flex项：即Flex容器内的子元素，通过设置`flex`属性来控制其在Flex容器中的布局和排列方式。

#### 3.2 主轴和侧轴

- 主轴：Flex容器的主要轴线，Flex项沿着主轴排列。在Flexbox布局中，主轴的方向可以是水平方向或垂直方向。

- 侧轴：与主轴垂直的轴线，一般用于调整Flex项在侧轴方向上的布局。

#### 3.3 Flexbox布局的属性介绍

Flexbox布局提供了一系列属性来控制Flex容器和Flex项的布局，其中包括但不限于：

- `flex-direction`: 设置主轴的方向
- `justify-content`: 控制Flex项在主轴上的对齐方式
- `align-items`: 控制Flex项在侧轴上的对齐方式
- `f