微信小程序中3个盒子的横向及纵向布局

在微信小程序中，可以使用 Flexbox 或者 CSS Grid 来实现三个盒子的水平和垂直布局。以下是两种常见的方法：

1. **Flex布局**:
- 水平布局 (横向)：你可以将包含三个盒子的容器设置为 `display: flex;`，然后使用 `flex-direction: row;` 让它们从左到右排列。如果需要等间距分布，可以给容器添加 `justify-content: space-between;`。

   <view class="container">
     <view>盒子1</view>
     <view>盒子2</view>
     <view>盒子3</view>
   </view>

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

- 垂直布局 (纵向)：将 `flex-direction` 设置为 `column` 可以让盒子按从上到下的顺序排列，同样可以用 `align-items` 控制盒子之间的对齐方式。

2. **CSS Grid布局**:
- 横向布局：创建一个 grid 容器，并指定 `grid-template-columns` 为三列。每个盒子就是 grid 的一个单元格。

   <view class="container">
     <view>盒子1</view>
     <view>盒子2</view>
     <view>盒子3</view>
   </view>

   .container {
     display: grid;
     grid-template-columns: repeat(3, 1fr); /* 等分三列 */
   }

- 纵向布局：设置 `grid-template-rows` 为一行即可。