微信小程序中的 Flex box 自适应布局

# 章节一：微信小程序简介
## 1.1 了解微信小程序的概念与特点
## 1.2 简述微信小程序中的布局方式
## 2. 章节二：Flex box 布局介绍
2.1 什么是 Flex box 布局
2.2 Flex box 在微信小程序中的应用场景
2.3 Flex box 的优势和特点
### 3. 章节三：Flex box 布局的基本语法

在微信小程序中，使用 Flex box 布局可以极大地简化页面布局的复杂度，灵活应对不同屏幕尺寸下的布局需求。接下来，我们将介绍 Flex box 布局的基本语法和在微信小程序中的具体应用。

#### 3.1 如何在微信小程序中使用 Flex box 布局

在 WXML 文件中，通过设置容器的`display`属性为`flex`，即可将该容器指定为 Flex 布局容器。具体语法如下：

<view class="flex-container">
  <view class="flex-item">Item 1</view>
  <view class="flex-item">Item 2</view>
  <view class="flex-item">Item 3</view>
</view>

在对应的 WXSS 样式文件中，为了让容器生效 Flex 布局，需设置`display: flex;`，并可以设置`flex-direction`、`justify-content`、`align-items`等属性来控制布局方向和对齐方式。

#### 3.2 Flex container 和 Flex item 的属性介绍

Flex 布局中，容器和项目都有各自对应的属性，下面是一些常见的属性介绍：

- 容器属性：
- `display`：指定为`flex`，表示该容器为 Flex 布局。
- `flex-direction`：设置主轴的方向，如`row`、`column`等。
- `justify-content`：定义了项目在主轴上的对齐方式。
- `align-items`：定义了项目在交叉轴上的对齐方式。

- 项目属性：
- `flex`：定义项目的放大比例，实现空间动态分配。
- `align-self`：覆盖容器的`align-items`属性，定义单个项目在交叉轴上的对齐方式。

#### 3.3 实例演示：Flex box 布局的基本用法

下面是一个简单的实例演示，演示了在微信小程序中使用 Flex box 布局的基本用法。

<!-- WXML 文件 -->
<view class="flex-container">
  <view class="flex-item" style="background-color: #ff9900;">Item 1</view>
  <view class="flex-item" style="background-color: #66ccff;">Item 2</view>
  <view class="flex-item" style="background-color: #99cc99;">Item 3</view>
</view>

/* WXSS 样式文件 */
.flex-conta