wx小程序 - 盒子布局 学习总结

在微信小程序中，盒子布局主要是通过CSS样式来实现的。以下是一些常用的盒子布局方式：

1. 水平布局：

.container {
  display: flex; /* 使用flex布局 */
  justify-content: center; /* 水平居中 */
}

<view class="container">
  <view>第一个元素</view>
  <view>第二个元素</view>
</view>

2. 垂直布局：

.container {
  display: flex; /* 使用flex布局 */
  flex-direction: column; /* 垂直方向 */
  align-items: center; /* 垂直居中 */
}

<view class="container">
  <view>第一个元素</view>
  <view>第二个元素</view>
</view>

3. 网格布局：

.container {
  display: grid; /* 使用网格布局 */
  grid-template-columns: 1fr 1fr; /* 两列布局 */
  gap: 10px; /* 格子间隔 */
}

<view class="container">
  <view>第一个元素</view>
  <view>第二个元素</view>
  <view>第三个元素</view>
</view>

在实际开发中，根据需求选择合适的布局方式，并通过CSS样式来调整盒子的位置、大小等属性。