Flexbox布局指南：灵活且强大的布局方式

# 1. 简介

- 1.1 什么是Flexbox布局？
- 1.2 Flexbox相较于传统布局方式的优势

# 2. Flex容器与Flex项目

Flexbox布局中的两个核心概念是Flex容器和Flex项目。了解它们的特性和属性对于灵活地布局元素至关重要。让我们深入了解这两个概念。

### 2.1 Flex容器的基本概念

Flex容器是指应用了Flexbox布局的父元素，通过设置`display: flex`或`display: inline-flex`来定义。Flex容器主要用于包裹并管理Flex项目。

### 2.2 Flex项目的特性和属性

Flex项目是Flex容器内部的子元素，可以是任意HTML元素。每个Flex项目都有一些属性可以控制其在Flex容器中的表现，比如`flex-grow`、`flex-shrink`和`flex-basis`等。

### 2.3 如何创建一个Flex容器

要创建一个Flex容器，首先需要选取一个元素作为Flex容器，然后通过设置其`display`属性为`flex`或`inline-flex`来声明它是一个Flex容器。接着，可以通过设置容器上的各种属性，如`flex-direction`、`justify-content`和`align-items`等，来控制Flex项目的排列和对齐方式。

在接下来的章节中，我们将更深入地探讨Flex容器和Flex项目之间的关系，以及它们在Flexbox布局中的作用和应用。

# 3. 主轴与交叉轴

Flexbox布局中的主轴和交叉轴是非常重要的概念，理解它们可以帮助我们更好地掌握布局方式和对齐效果。

#### 3.1 理解Flexbox的主轴和交叉轴

在Flexbox中，主轴指的是Flex容器的主要方向，而交叉轴则是与主轴垂直的方向。默认情况下，主轴是水平方向的，交叉轴是垂直方向的。

#### 3.2 主轴和交叉轴上的对齐方式

在Flexbox布局中，我们可以通过设置主轴和交叉轴的对齐方式来控制Flex项目在容器中的排列方式。主轴的对齐方式包括：
- `justify-content`：控制项目在主轴上的对齐方式，如`flex-start`、`center`、`flex-end`等。
- `align-items`：控制项目在交叉轴上的对齐方式，如`flex-start`、`center`、`flex-end`等。

#### 3.3 如何设置主轴与交叉轴的排列方式

通过在Flex容器上应用相应的CSS属性，我们可以轻松地设置主轴和交叉轴的排列方式。例如：

.container {
  display: flex;
  justify-content: center; /*