页面中的每一行布局由<row>
元素来定义。
属性
属性 | 描述 | 默认值 | 说明 |
---|---|---|---|
type | 行内元素布局方式 | “split” | type="split":行内的子元素等宽平均排列type="flex":行内的子元素宽度根据元素内容自动填充 |
gutter | 栅格间隔,单位为像素值 | [0, 0] | 使用数组形式同时设置 [水平间距, 垂直间距],如 gutter=[0,0] |
flex属性
采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),以下简称"项目"。
属性 | 描述 | 默认值 | 说明 |
---|---|---|---|
justify | flex容器内的项目水平布局方式 | "start" | justify="start":项目从行首开始排列justify= "end", 项目从行尾开始排列justify="center":项目水平居中排列justify="space-around":每个项目两侧的间隔相等。所以,项目之间的间隔比项目与flex容器边框的间隔大一倍justify="space-between":两端对齐,项目之间的间隔都相等 |
align | flex容器内的项目垂直方向的布局方式 | "top" | align="top":与侧轴起点对齐align="middle":与侧轴中点对齐align="bottom":与侧轴终点对齐 |
<row>
在 split 布局下可以包含任意类型的子元素。而在 flex 布局下只能包含col子元素。
文档反馈
(如有产品使用问题,请 提交工单)