布局

介绍

布局组件需要z-col,z-row两个组件搭配使用。在考虑兼容多端的情况下，更推荐使用flex布局。

基础用法

span属性控制所占的宽度百分比。offset属性用来控制偏移的宽度。

<z-row>
	<z-col span="8">span: 8</z-col>
	<z-col span="8">span: 8</z-col>
	<z-col span="8">span: 8</z-col>
</z-row>
<z-row>
	<z-col span="4">span: 4</z-col>
	<z-col span="10" offset="4">
		offset: 4, span: 10
	</z-col>
</z-row>
<z-row>
	<z-col offset="12" span="12">
		offset: 12, span: 12
	</z-col>
</z-row>

间距

通过gutter属性来设置元素之间的间距。

<z-row gutter="80">
	<z-col span="8">span: 8</z-col>
	<z-col span="8">span: 8</z-col>
	<z-col span="8">span: 8</z-col>
</z-row>
<z-row gutter="50">
	<z-col span="6">span: 6</z-col>
	<z-col span="6">span: 6</z-col>
	<z-col span="6">span: 6</z-col>
	<z-col span="6">span: 6</z-col>
</z-row>

flex布局

通过将属性type设置为flex即可开启flex布局。通过justify属性可以设置对齐方式。

兼容性提示：字节小程序不支持开启flex布局。

<z-row type="flex">
	<z-col span="6">span: 6</z-col>
	<z-col span="6">span: 6</z-col>
	<z-col span="6">span: 6</z-col>
</z-row>
<z-row type="flex" justify="center">
	<z-col span="6">span: 6</z-col>
	<z-col span="6">span: 6</z-col>
	<z-col span="6">span: 6</z-col>
</z-row>
<z-row type="flex" justify="end">
	<z-col span="6">span: 6</z-col>
	<z-col span="6">span: 6</z-col>
	<z-col span="6">span: 6</z-col>
</z-row>
<z-row type="flex" justify="space-between">
	<z-col span="6">span: 6</z-col>
	<z-col span="6">span: 6</z-col>
	<z-col span="6">span: 6</z-col>
</z-row>
<z-row type="flex" justify="space-around">
	<z-col span="6">span: 6</z-col>
	<z-col span="6">span: 6</z-col>
	<z-col span="6">span: 6</z-col>
</z-row>

Props

Slots

Props

Events

Slots