小程序 View 排列技巧：使用 Flex 布局实现整齐布局

在小程序中，使用 Flex 布局可以轻松实现 View 的整齐排列。

基本用法

1. 在父容器中设置 display: flex，将父容器设置为 Flex 布局容器。
2. 使用 justify-content 和 align-items 属性控制子元素的水平和垂直排列方式。
   • justify-content: center：水平居中
   • align-items: center：垂直居中
3. 使用 flex-wrap 属性控制子元素的换行方式。
   • flex-wrap: wrap：自动换行

示例：横向排列的 View 列表

<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;
  justify-content: space-between;
}

.item {
  flex-basis: 0;
  flex-grow: 1;
}

示例：纵向排列的 View 列表

<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-direction: column;
  align-items: center;
}

更多 Flex 属性

• flex-wrap: wrap：自动换行
• justify-content: space-around：子元素之间间距相等
• align-content: space-between：子元素在垂直方向上平均分布
• flex-shrink：控制子元素的缩放比例

使用 Flex 布局可以方便地控制 View 的排列方式，提高小程序的用户体验。