布局组件

17:06

说明

ux-row 是 12 栅格容器，用 flex 横向换行排列，gutter 设定栏间距（左右各一半，经注入传给列），justify / align 控制整体水平与垂直对齐。ux-col 是栅格单元，span 表示占 12 等分中的份数（宽度 = span / 12 × 100%），offset 为左侧偏移份数。

兼容性

平台	支持情况
App	✅ 支持
H5	✅ 支持
微信小程序	✅ 支持

示例

basic

ux-row + ux-col 的最小组合：gutter=5，两个 span=6 的列各占一半宽度。

查看源码

vue

<template>
    <ux-row :gutter="5">
        <ux-col :span="6">
            <view class="block block-primary" />
        </ux-col>
        <ux-col :span="6">
            <view class="block block-success" />
        </ux-col>
    </ux-row>
</template>

<style scoped>
.block {
    height: 40px;
    border-radius: 4px;
}
.block-primary {
    background-color: #2979ff;
}
.block-success {
    background-color: #19be6b;
}
</style>

span

span 决定每列占 12 等分的份数：上排 4 / 4 / 4，下排 8 / 4。

查看源码

vue

<template>
    <ux-row :gutter="5">
        <ux-col :span="4">
            <view class="block block-primary" />
        </ux-col>
        <ux-col :span="4">
            <view class="block block-success" />
        </ux-col>
        <ux-col :span="4">
            <view class="block block-warning" />
        </ux-col>
    </ux-row>
    <view class="gap" />
    <ux-row :gutter="5">
        <ux-col :span="8">
            <view class="block block-primary" />
        </ux-col>
        <ux-col :span="4">
            <view class="block block-error" />
        </ux-col>
    </ux-row>
</template>

<style scoped>
.block {
    height: 40px;
    border-radius: 4px;
}
.gap {
    height: 12px;
}
.block-primary {
    background-color: #2979ff;
}
.block-success {
    background-color: #19be6b;
}
.block-warning {
    background-color: #ff9900;
}
.block-error {
    background-color: #fa3534;
}
</style>

offset

offset 让列左侧空出对应份数，示例第二个 span=4 的列偏移 4 份。

查看源码

vue

<template>
    <ux-row :gutter="5">
        <ux-col :span="4">
            <view class="block block-primary" />
        </ux-col>
        <ux-col :span="4" :offset="4">
            <view class="block block-success" />
        </ux-col>
    </ux-row>
</template>

<style scoped>
.block {
    height: 40px;
    border-radius: 4px;
}
.block-primary {
    background-color: #2979ff;
}
.block-success {
    background-color: #19be6b;
}
</style>

gutter

gutter=20 时相邻列间距为 20px（每列左右各 10px 内边距）。

查看源码

vue

<template>
    <ux-row :gutter="20">
        <ux-col :span="3">
            <view class="block block-primary" />
        </ux-col>
        <ux-col :span="3">
            <view class="block block-success" />
        </ux-col>
        <ux-col :span="3">
            <view class="block block-warning" />
        </ux-col>
        <ux-col :span="3">
            <view class="block block-error" />
        </ux-col>
    </ux-row>
</template>

<style scoped>
.block {
    height: 40px;
    border-radius: 4px;
}
.block-primary {
    background-color: #2979ff;
}
.block-success {
    background-color: #19be6b;
}
.block-warning {
    background-color: #ff9900;
}
.block-error {
    background-color: #fa3534;
}
</style>

align

justify 与 align 分别控制行内水平与垂直对齐，示例为 space-between + bottom。

查看源码

vue

<template>
    <ux-row justify="space-between" align="bottom">
        <ux-col :span="6">
            <view class="block block-primary" :style="{ height: '50px' }" />
        </ux-col>
        <ux-col :span="6">
            <view class="block block-success" />
        </ux-col>
    </ux-row>
</template>

<style scoped>
.block {
    height: 40px;
    border-radius: 4px;
}
.block-primary {
    background-color: #2979ff;
}
.block-success {
    background-color: #19be6b;
}
</style>

API

Props

ux-row

属性	说明	类型	默认值	版本
`customStyle`	自定义根节点样式	`UTSJSONObject`	`-`	-
`customClass`	自定义根节点样式类	`string`	`''`	-
`gutter`	栅格间隔，左右各为此值的一半，单位 px	`number \| string`	`0`	-
`justify`	水平排列方式：start \| end \| center \| around \| between	`string`	`'start'`	-
`align`	垂直排列方式：top \| center \| bottom	`string`	`'center'`	-
`stop`	是否阻止事件传播	`boolean`	`true`	-

ux-col

属性	说明	类型	默认值	版本
`customStyle`	自定义根节点样式	`UTSJSONObject`	`-`	-
`customClass`	自定义根节点样式类	`string`	`''`	-
`span`	栅格占据的列数，总 12 等分	`number \| string`	`12`	-
`offset`	分栏左边偏移，同 span 计算方式（总 12 栏）	`number \| string`	`0`	-
`justify`	水平排列方式	`string`	`'start'`	-
`align`	垂直排列方式	`string`	`'center'`	-
`textAlign`	文字水平对齐方式	`string`	`'left'`	-
`stop`	是否阻止事件传播	`boolean`	`true`	-

Events

本页组件均无事件。

Slots

ux-row

插槽名	说明	版本
`default`	放置 `ux-col` 子项	-

ux-col

插槽名	说明	版本
`default`	列内容	-

注意事项

ux-col 的 gutter 来自父级 ux-row 注入；脱离 ux-row 单独使用时按 0 处理。
span / offset 以 12 等分为基准：宽度 = span / 12 × 100%，offset 同比例换算为 margin-left。
ux-row 为 flex-wrap: wrap，一行内 span 之和超过 12 会换行。
justify 取 start / end / around / between 时分别映射为 flex-* / space-*，center 直接使用；align 取 top / center / bottom。
gutter 以每列左右各一半内边距实现，因此行首尾也会各留 gutter / 2 的空隙。

布局组件 ​

说明 ​

兼容性 ​

示例 ​

basic ​

span ​

offset ​

gutter ​

align ​

API ​

Props ​

ux-row ​

ux-col ​

Events ​

Slots ​

ux-row ​

ux-col ​

注意事项 ​

布局组件

说明

兼容性

示例

basic

span

offset

gutter

align

API

Props

ux-row

ux-col

Events

Slots

ux-row

ux-col

注意事项