通过基础的 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-row justify="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-row justify="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-row justify="space-between" customStyle="margin-bottom: 10px" > <u-col span="3" offset="3" > <view class="demo-layout bg-purple-light"></view> </u-col> <u-col span="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-col span="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-row justify="space-between" customStyle="margin-bottom: 10px" > <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-row> <u-row> <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-row> </view>
