微信小程序 Flex box 的主轴和交叉轴

# 1. 简介

## 1.1 介绍微信小程序

微信小程序是一种不需要下载安装即可使用的应用，它实现了“用完即走”的场景服务。用户扫描或搜索即可打开应用，无需安装卸载。微信小程序有“无需安装、用完即走”的特点，可以在微信内被便捷地获取和传播，同时具有出色的用户体验。在小程序的体系内，有完善的工具链和成熟的开发规范，开发门槛相对较低，能够快速迭代和发布。

## 1.2 什么是 Flex box

Flex box 是一种用于在页面上进行布局的工具，它是一种基于“弹性盒子”模型的布局方式。使用 Flex box 布局可以轻松实现页面中元素的排列和对齐，灵活应对不同设备分辨率和屏幕尺寸。Flex box 提供了一套强大而灵活的布局能力，使得开发者能够更加轻松地实现自适应布局。

## 1.3 本文内容概述

## Flex box 布局原理

### 3. 主轴属性详解

在 Flex box 布局中，主轴属性用来控制 Flex 项目在主轴上的排列方式、间距和对齐方式。下面我们来详细了解主轴属性的使用。

#### 3.1 主轴的方向设置

在 Flex 容器中，可以通过 `flex-direction` 属性来设置主轴的方向。有四个可选值：

- `row`：主轴为水平方向，起点在左端。
- `row-reverse`：主轴为水平方向，起点在右端。
- `column`：主轴为垂直方向，起点在上沿。
- `column-reverse`：主轴为垂直方向，起点在下沿。

.flex-container {
  display: flex; /* 使用 Flex 布局 */
  flex-direction: row; /* 主轴为水平方向 */
}

#### 3.2 主轴上的项目排列方式

主轴上的项目排列方式可以通过 `justify-content` 属性来设置。常用的取值有：

- `flex-start`：项目向主轴起点对齐。
- `flex-end`：项目向主轴终点对齐。
- `center`：项目居中对齐。
- `space-between`：项目间距相等，首尾项目与容器边框之间没有间隙。
- `space-around`：项目间有相等的间距，首尾项目与容器边框之间有一半的间隙。

.flex-container {
  display: flex; /* 使用 Flex 布局 */
  justify-content: space-between; /* 主轴上的项目间距相等 */
}

#### 3.3 主轴上的间距和对齐方式

此外，还可以通过 `gap` 属性为主轴上的项目设置间距，通过 `align-items` 属性来设置项目在交叉轴上的对齐方式。

.flex-container {
  display: flex; /* 使用 Flex 布局 */
  gap: 10px; /* 主轴上的项目间距为 10px */
  al