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

注意

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

#平台差异说明

App（vue）	App（nvue）	H5	小程序
√	√	√	√

#基本使用

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

<template><view class="u-page"><view class="u-demo-block"><text class="u-demo-block__title">基础使用</text><view class="u-demo-block__content"><u-row customStyle="margin-bottom: 10px"><u-col span="6"><view class="demo-layout bg-purple-light"></view></u-col><u-col span="6"><view class="demo-layout bg-purple"></view></u-col></u-row><u-row customStyle="margin-bottom: 10px"><u-col span="4"><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="4"><view class="demo-layout bg-purple-dark"></view></u-col></u-row><u-row justify="space-between"><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-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></view></view></view>
</template><style lang="scss">.wrap {padding: 12px;}.demo-layout {height: 25px;border-radius: 4px;}.bg-purple {background: #CED7E1;}.bg-purple-light {background: #e5e9f2;}.bg-purple-dark {background: #99a9bf;}
</style>

copy

#分栏间隔

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

<view class="u-demo-block__content"><u-rowjustify="space-between"gutter="10"><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-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>
</view><style lang="scss">.wrap {padding: 12px;}.demo-layout {height: 25px;border-radius: 4px;}.bg-purple {background: #CED7E1;}.bg-purple-light {background: #e5e9f2;}.bg-purple-dark {background: #99a9bf;}
</style>

copy

#混合布局

通过指定col组件的span属性，指定不同的值，达到不同的比例

<view class="u-demo-block__content"><u-rowjustify="space-between"gutter="10"><u-col span="2"><view class="demo-layout bg-purple-light"></view></u-col><u-col span="4"><view class="demo-layout bg-purple"></view></u-col><u-col span="6"><view class="demo-layout bg-purple-dark"></view></u-col></u-row>
</view><style lang="scss">.wrap {padding: 12px;}.demo-layout {height: 25px;border-radius: 4px;}.bg-purple {background: #CED7E1;}.bg-purple-light {background: #e5e9f2;}.bg-purple-dark {background: #99a9bf;}
</style>

copy

#分栏偏移

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

<view class="u-demo-block__content"><u-rowjustify="space-between"customStyle="margin-bottom: 10px"><u-colspan="3"offset="3"><view class="demo-layout bg-purple-light"></view></u-col><u-colspan="3"offset="3"><view class="demo-layout bg-purple"></view></u-col></u-row><u-row><u-col span="3"><view class="demo-layout bg-purple-light"></view></u-col><u-colspan="3"offset="3"><view class="demo-layout bg-purple"></view></u-col></u-row>
</view>

copy

#对齐方式

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

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

<view class="u-demo-block__content"><u-rowjustify="space-between"customStyle="margin-bottom: 10px"><u-colspan="3"><view class="demo-layout bg-purple-light"></view></u-col><u-colspan="3"><view class="demo-layout bg-purple"></view></u-col></u-row><u-row><u-col span="3"><view class="demo-layout bg-purple-light"></view></u-col><u-colspan="3"><view class="demo-layout bg-purple"></view></u-col></u-row>
</view>