ShadowUI3

# ui-layout 布局组件

版本：v2.3.11

布局组件提供了丰富的网格和弹性布局工具，用于快速构建响应式页面结构，是构建页面布局的基础组件。

# 基本使用

# 弹性布局基础

<!-- 默认12列布局 -->
<view class="ui-flex ui-space-padding-2">
  <view class="ui-flex-c">
    <text class="flex-demo">1</text>
  </view>
  <view class="ui-flex-c">
    <text class="flex-demo">2</text>
  </view>
  <!-- 更多列 -->
</view>

<!-- 2列布局 -->
<view class="ui-flex ui-flex-2 ui-space-padding-2">
  <view class="ui-flex-c">
    <text class="flex-demo">1</text>
  </view>
  <view class="ui-flex-c">
    <text class="flex-demo">2</text>
  </view>
</view>

<!-- 6列布局 -->
<view class="ui-flex ui-flex-6 ui-space-padding-2">
  <view class="ui-flex-c">
    <text class="flex-demo">1</text>
  </view>
  <!-- 更多列 -->
</view>

# 布局类型

# 弹性布局（ui-flex）

弹性布局是一种灵活的布局方式，通过 ui-flex-* 类控制列数。

# 基本用法

<!-- 带边框的弹性布局 -->
<view class="ui-flex ui-flex-3 ui-layout-border">
  <view class="ui-flex-c">
    <text class="flex-demo">1</text>
  </view>
  <!-- 更多列 -->
</view>

<!-- 带间距的弹性布局 -->
<view class="ui-flex ui-flex-4 ui-space-padding-6">
  <view class="ui-flex-c">
    <text class="flex-demo">1</text>
  </view>
  <!-- 更多列 -->
</view>

# 多层嵌套

<!-- 多层嵌套布局 -->
<view class="ui-flex ui-flex-1">
  <view class="ui-flex-c" style="padding: 20rpx;background: #79C48C;">
    <view class="ui-flex ui-flex-1">
      <view class="ui-flex-c">
        <text class="flex-demo" style="background: #38814A;">ui-flex-1</text>
      </view>
    </view>
    <view class="ui-flex ui-flex-2">
      <view class="ui-flex-c">
        <text class="flex-demo" style="background: #49A761;">ui-flex-2</text>
      </view>
      <view class="ui-flex-c">
        <text class="flex-demo" style="background: #63BA79;">ui-flex-2</text>
      </view>
    </view>
  </view>
</view>

# 自动适应布局（ui-flex-auto）

自动适应布局适用于常见的固定宽度+自适应宽度场景。

<!-- 自动适应布局 -->
<view class="ui-flex-auto ui-space-padding-2">
  <view class="ui-flex-c">
    <text class="flex-demo">固定左</text>
  </view>
  <view class="ui-flex-body">
    <text class="flex-demo">自适应内容</text>
  </view>
</view>

<!-- 左右固定+中间自适应 -->
<view class="ui-flex-auto ui-space-margin-2">
  <view class="ui-flex-c">
    <text class="flex-demo" style="width: 120rpx;">固定左</text>
  </view>
  <view class="ui-flex-body">
    <text class="flex-demo">自适应中间</text>
  </view>
  <view class="ui-flex-c">
    <text class="flex-demo" style="width: 120rpx;">固定右</text>
  </view>
</view>

# 平分布局（ui-flex-bisect）

平分布局会自动将子元素平均分配空间。

<!-- 平分布局 -->
<view class="ui-flex-bisect ui-space-margin-2">
  <view class="ui-flex-c">
    <text class="flex-demo">1</text>
  </view>
  <view class="ui-flex-c">
    <text class="flex-demo">2</text>
  </view>
  <view class="ui-flex-c">
    <text class="flex-demo">3</text>
  </view>
</view>

# 两端对齐布局（ui-flex-between）

两端对齐布局使子元素分别对齐容器的两端。

<!-- 两端对齐布局 -->
<view class="ui-flex-between ui-space-margin-2">
  <view class="ui-flex-c">
    <text class="flex-demo">左侧内容</text>
  </view>
  <view class="ui-flex-c">
    <text class="flex-demo">右侧内容</text>
  </view>
</view>

# 网格布局（ui-grid）

网格布局通过 ui-grid-* 类精确控制每列的宽度比例。

<!-- 网格布局 -->
<view class="ui-grid ui-space-padding-2">
  <view class="ui-grid-1">
    <view class="flex-demo">1</view>
  </view>
  <view class="ui-grid-11">
    <view class="flex-demo">11</view>
  </view>
  <view class="ui-grid-2">
    <view class="flex-demo">2</view>
  </view>
  <!-- 更多网格 -->
</view>

<!-- 网格多层嵌套 -->
<view class="ui-grid ui-space-padding-6 padding-10">
  <view class="ui-grid-6" style="background: #79C48C;">
    <view class="ui-grid ui-space-padding-2">
      <view class="ui-grid-7" style="background: #38814A;">
        7
      </view>
      <view class="ui-grid-5" style="background: #49A761;">
        5
      </view>
    </view>
  </view>
  <view class="ui-grid-6" style="background: #57b36e;">
    6
  </view>
</view>

# 高级功能

# 布局方向控制

通过 ui-flex-* 系列类控制布局方向。

<!-- 垂直布局 -->
<view class="ui-flex ui-flex-column margin-tb-2">
  <view class="ui-flex-c" style="width: 100%;">
    <text class="flex-demo">Item 1</text>
  </view>
  <view class="ui-flex-c" style="width: 100%;">
    <text class="flex-demo">Item 2</text>
  </view>
</view>

<!-- 水平反向布局 -->
<view class="ui-flex ui-flex-3 ui-flex-row-reverse margin-tb-2">
  <view class="ui-flex-c">
    <text class="flex-demo">Item 1</text>
  </view>
  <view class="ui-flex-c">
    <text class="flex-demo">Item 2</text>
  </view>
</view>

# 对齐方式控制

通过 ui-justify-* 和 ui-align-* 系列类控制对齐方式。

<!-- 主轴居中 -->
<view class="ui-flex ui-justify-center margin-tb-2">
  <view class="ui-flex-c" style="width: 20%;">
    <text class="flex-demo">居中</text>
  </view>
</view>

<!-- 交叉轴顶部对齐 -->
<view class="ui-flex ui-flex-3 ui-align-start margin-tb-2" style="height: 200rpx; background-color: #f5f5f5; padding: 20rpx; border-radius: 8rpx;">
  <view class="ui-flex-c">
    <text class="flex-demo">顶部</text>
  </view>
  <view class="ui-flex-c">
    <text class="flex-demo" style="height: 120rpx;">较高元素</text>
  </view>
  <view class="ui-flex-c">
    <text class="flex-demo">顶部</text>
  </view>
</view>

# 网格间距控制

通过 ui-grid-gap-* 系列类控制网格间距。

<!-- 间距为8rpx -->
<view class="ui-grid ui-grid-gap-2 margin-tb-2">
  <view class="ui-grid-6">
    <view class="flex-demo">ui-grid-6</view>
  </view>
  <view class="ui-grid-6">
    <view class="flex-demo">ui-grid-6</view>
  </view>
</view>

# 边框控制

通过 ui-border-* 系列类控制边框样式。

<!-- 仅底部边框 -->
<view class="ui-flex ui-flex-2 margin-tb-2">
  <view class="ui-flex-c">
    <text class="flex-demo ui-border-bottom">仅底部边框</text>
  </view>
  <view class="ui-flex-c">
    <text class="flex-demo ui-border-bottom">仅底部边框</text>
  </view>
</view>

# 空白占位符

通过 ui-flex-spacer 创建自适应空白占位。

<!-- 空白占位符 -->
<view class="ui-flex margin-tb-2">
  <view class="ui-flex-c">
    <text class="flex-demo">左侧</text>
  </view>
  <view class="ui-flex-spacer"></view>
  <view class="ui-flex-c">
    <text class="flex-demo">右侧</text>
  </view>
</view>

# 布局类说明

# 弹性布局类

类名 说明
ui-flex 基础弹性布局容器
ui-flex-* 控制列数（*取值1-12）
ui-flex-auto 自动适应布局
ui-flex-bisect 平分布局
ui-flex-between 两端对齐布局
ui-flex-column 垂直布局
ui-flex-row-reverse 水平反向布局

# 网格布局类

类名 说明
ui-grid 基础网格布局容器
ui-grid-* 控制网格宽度（*取值1-12）
ui-grid-gap-* 控制网格间距

# 间距类

类名 说明
ui-space-padding-* 控制内边距
ui-space-margin-* 控制外边距

# 对齐类

类名 说明
ui-justify-center 主轴居中对齐
ui-justify-between 主轴两端对齐
ui-align-start 交叉轴顶部对齐
ui-align-center 交叉轴居中对齐

# 其他辅助类

类名 说明
ui-layout-border 添加布局边框
ui-border-bottom 仅底部边框
ui-border-right 仅右侧边框
ui-flex-spacer 弹性空白占位符
ui-flex-body 自适应宽度内容区
ui-flex-c 弹性子元素容器

# 使用技巧

  1. 响应式布局：根据屏幕尺寸选择合适的列数
  2. 多层嵌套：通过多层布局嵌套实现复杂界面
  3. 间距控制：使用 ui-space-* 系列类控制元素间距
  4. 对齐方式：根据需要选择合适的对齐方式
  5. 性能优化：避免过深的布局嵌套，减少重排

# 示例代码

# 常见布局示例

# 顶部导航栏

<view class="ui-flex-auto">
  <view class="ui-flex-c">
    <text class="flex-demo">Logo</text>
  </view>
  <view class="ui-flex-body">
    <text class="flex-demo">标题</text>
  </view>
  <view class="ui-flex-c">
    <text class="flex-demo">菜单</text>
  </view>
</view>

# 卡片网格

<view class="ui-flex ui-flex-3 ui-space-padding-4">
  <view class="ui-flex-c">
    <text class="flex-demo">卡片1</text>
  </view>
  <view class="ui-flex-c">
    <text class="flex-demo">卡片2</text>
  </view>
  <view class="ui-flex-c">
    <text class="flex-demo">卡片3</text>
  </view>
</view>

# 表单布局

<view class="ui-flex-auto ui-space-padding-2">
  <view class="ui-flex-c" style="width: 150rpx;">
    <text>用户名：</text>
  </view>
  <view class="ui-flex-body">
    <input placeholder="请输入用户名" />
  </view>
</view>

# 平台兼容性

平台 兼容性
H5 ✅
微信小程序 ✅
支付宝小程序 ✅
百度小程序 ✅
字节跳动小程序 ✅
QQ小程序 ✅
APP ✅

# 注意事项

  1. 布局类主要通过CSS实现，不会生成额外的DOM元素
  2. 建议根据实际需要选择合适的布局方式，避免过度复杂化
  3. 在移动端使用时，注意控制列数，确保在小屏幕上有良好的显示效果
  4. 可以通过自定义CSS变量修改布局组件的默认样式

在线演示

扫码或点击链接在手机上查看完整演示

https://shadow-ui3-demo.nooko.cn/#/pages/base/layout/layout

← ui-navtop 顶部导航占位组件 →