微信小程序中的 Flex 容器和子项

# 简介

## 背景和意义

在微信小程序开发中，布局是一个非常重要的环节。良好的布局可以使小程序界面更加美观和易用。而 Flex 布局作为一种新型的布局方式，能够很好地解决传统布局方式的一些痛点，提供了更加灵活和便捷的布局方案。

## Flex 布局的基本概念

Flex 布局是一种基于盒状模型的布局方式，通过对容器和子项的属性设置，实现灵活的布局效果。在微信小程序中，我们可以通过使用 Flex 容器和 Flex 子项来构建界面，实现各种各样的布局需求。

## Flex 容器

### 3. Flex 子项

在 Flex 布局中，Flex 容器内的每个子元素即为 Flex 子项。通过设置子项的属性，可以实现灵活的布局效果。

#### 3.1 定义 Flex 子项

在微信小程序中，可以通过 `css` 样式定义 Flex 子项，以实现灵活的布局效果。在 `wxss` 文件中使用以下样式定义 Flex 子项：

/* 在 wxss 文件中定义 Flex 子项 */
.flex-item {
  flex: 1; /* 定义 Flex 子项的扩展比例 */
  margin: 10rpx; /* 设置子项间距 */
}

#### 3.2 子项的属性和用法

Flex 子项的常用属性包括：

- `flex`：定义子项的扩展比例，根据比例分配多余空间
- `order`：定义子项的排列顺序
- `align-self`：定义子项在交叉轴上的对齐方式

/* 在 wxss 文件中定义 Flex 子项的属性 */
.flex-item