uniapp线性布局

### UniApp 中实现线性布局

在 UniApp 开发环境中，可以利用 `view` 组件以及 CSS Flexbox 布局来创建线性布局。通过设置合适的样式属性，能够轻松构建水平或垂直方向上的线性排列效果。

#### 使用 View 和 Style 属性创建简单线性布局

对于简单的线性布局而言，在页面的 WXML 文件中定义多个 `view` 标签作为容器，并为其指定特定类名以便于应用样式：

<template>
  <view class="container">
    <!-- 水平线性布局 -->
    <view class="horizontal-layout">
      <text>Item 1</text>
      <text>Item 2</text>
      <text>Item 3</text>
    </view>

    <!-- 垂直线性布局 -->
    <view class="vertical-layout">
      <text>Item A</text>
      <text>Item B</text>
      <text>Item C</text>
    </view>
  </view>
</template>

接着，在 WXSS 文件里为这些类添加相应的样式规则以启用Flexbox特性并调整子项之间的间距等参数:

/* 定义全局样式 */
.container {
  padding: 20px;
}

.horizontal-layout,
.vertical-layout {
  display: flex; /* 启用弹性盒子模型 */
  justify-content: space-between; /* 子元素间的间隔分布方式 */
  align-items: center; /* 设置交叉轴上居中的对齐方式 */
}

.horizontal-layout {
  flex-direction: row; /* 默认横向排列 */
}

.vertical-layout {
  flex-direction: column; /* 改变为纵向排列 */
}

上述代码展示了如何在一个视图内分别建立两组不同方向（横/竖）的一维数组形式展示的内容结构[^1]。