UniApp 布局教程：Flex、Grid 和 Position 布局详解

UniApp 的布局方式与 Vue.js 类似，可以使用 HTML 标签和 Vue 的指令来进行布局。

以下是几种常见的布局方式：

使用 Flex 布局：

<template>
  <view class='container'>
    <view class='item'></view>
    <view class='item'></view>
    <view class='item'></view>
  </view>
</template>

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

.item {
  flex-basis: 30%;
  height: 100px;
}
</style>

使用 Grid 布局：

<template>
  <view class='container'>
    <view class='item'></view>
    <view class='item'></view>
    <view class='item'></view>
  </view>
</template>

<style>
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.item {
  height: 100px;
}
</style>

使用 Position 布局：

<template>
  <view class='container'>
    <view class='item'></view>
    <view class='item'></view>
    <view class='item'></view>
  </view>
</template>

<style>
.container {
  position: relative;
}

.item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
}
</style>

以上是常见的布局方式，根据实际需求可以选择适合的布局方式进行使用。