微信小程序alfx布局

微信小程序的布局主要有两种方式：Flex 布局和 Grid 布局。

1. Flex 布局

Flex 布局是一种弹性布局，使用起来非常方便。在小程序中，可以使用 `display: flex` 来开启 Flex 布局模式。比如，下面的代码片段是一个简单的 Flex 布局：

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

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  width: 30%;
  height: 100px;
  background-color: #f0f0f0;
  margin-bottom: 20px;
}

上面的代码实现了一个简单的 Flex 布局，其中容器元素设置了 `display: flex`，并且设置了 `flex-wrap: wrap` 让元素自动换行，`justify-content: space-between` 让元素在容器中水平分布。

2. Grid 布局

Grid 布局是一种网格布局，可以用来实现复杂的布局。在小程序中，可以使用 `display: grid` 来开启 Grid 布局模式。下面的代码片段是一个简单的 Grid 布局：

<view class="container">
  <view class="item">Item 1</view>
  <view class="item">Item 2</view>
  <view class="item">Item 3</view>
  <view class="item">Item 4</view>
  <view class="item">Item 5</view>
  <view class="item">Item 6</view>
</view>

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 20px;
}

.item {
  background-color: #f0f0f0;
  height: 100px;
}

上面的代码实现了一个简单的 Grid 布局，其中容器元素设置了 `display: grid`，并且设置了 `grid-template-columns` 和 `grid-template-rows` 定义了网格布局的列数和行数，`grid-gap` 定义了网格之间的间隔。