Layout 布局

通过基础的 12 分栏，迅速简便地创建布局

注意

如需实现类似宫格的布局，请使用uView的Grid宫格组件，可以设置角标，功能更完善和灵活

平台差异说明

基本使用

通过col组件的span设置需要分栏的比例

<template>
    <view class="wrap">
        <u-row gutter="16">
            <u-col span="3">
                <view class="demo-layout bg-purple"></view>
            </u-col>
            <u-col span="4">
                <view class="demo-layout bg-purple-light"></view>
            </u-col>
            <u-col span="5">
                <view class="demo-layout bg-purple-dark"></view>
            </u-col>
        </u-row>
        <u-row gutter="16" justify="space-between">
            <u-col span="3">
                <view class="demo-layout bg-purple"></view>
            </u-col>
            <u-col span="9">
                <view class="demo-layout bg-purple-light"></view>
            </u-col>
        </u-row>
    </view>
</template>
<style scoped lang="scss">
    .wrap {
        padding: 24rpx;
    }
    .u-row {
        margin: 40rpx 0;
    }
    .demo-layout {
        height: 80rpx;
        border-radius: 8rpx;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .bg-purple-dark {
        background: #99a9bf;
    }
</style>

分栏间隔

通过设置row组件的gutter参数，来指定每一栏之间的间隔(最终表现为左边内边距各为gutter/2)，默认间隔为0

<u-row gutter="16">
    <u-col span="3">
        <view class="demo-layout bg-purple">
        </view>
    </u-col>
    <u-col span="9">
        <view class="demo-layout bg-purple-light">
        </view>
    </u-col>
</u-row>

分栏偏移

通过指定col组件的offset属性可以指定分栏偏移的栏数。

<u-row gutter="16">
    <u-col span="3">
        <view class="demo-layout bg-purple"></view>
    </u-col>
    <u-col span="3" offset="6">
        <view class="demo-layout bg-purple-light"></view>
    </u-col>
</u-row>

对齐方式

通过row组件的justify来对分栏进行灵活的对齐， 可选值为start(或flex-start)、end(或flex-end)、center、around(或space-around)、between(或space-between)， 其最终的表现类似于css的justify-content属性。

注意：由于持微信小程序编译后的特殊结构，此方式不支持微信小程序。

<u-row gutter="16" justify="center">
    <u-col span="3">
        <view class="demo-layout bg-purple"></view>
    </u-col>
    <u-col span="3">
        <view class="demo-layout bg-purple-light"></view>
    </u-col>
</u-row>

API

Row Props

Col Props