row

横向flex布局容器

<row>是提供横向flex布局的容器，与 <col>组件（提供纵向flex布局）结合使用，可快速构建整洁干净的flex布局效果。

row属性

属性名	类型	必填	默认值	说明
justify	String	否	center	横向对齐方式，可选值包括：start/end/center/space-around/space-between
align	String	否	middle	纵向对齐方式，可选值包括：top/middle/bottom
height	Number	否	0	容器高度，值为0时容器高度由内部元素高度决定
wrap	Boolean	否	false	是否支持换行
margin	Number	否	0	容器上下间隔（单位cpx）

示例


<template>
  <row margin="{{100}}" height="{{200}}">
    <col width="{{50}}" height="{{100}}" background-color="#ddd" margin="{{20}}">
      <view></view>
    </col>
    <col  width="{{100}}" height="{{100}}" background-color="#bbb" margin="{{20}}">
      <view></view>
    </col>
    <col  width="{{200}}" height="{{100}}" background-color="#aaa" margin="{{20}}">
      <view></view>
    </col>
  </row>
</template>
<script>
class Row  {
}
export default new Row();
</script>
<script cml-type="json">
{
  "base": {}
}
</script>

web

native

查看完整示例

Bug & Tip

<row> 组件内部不一定要使用<col>组件，可使用任何需要布局的容器或组件。
如果<row> 组件内部不使用<col>组件，需要自行设置内部的宽高等属性。
如果<row> 组件内部使用<col>组件，需要将<col>组件设置为<row> 组件的直接子节点。
<row> 和 <col>组件组合使用类似栅格布局，<row> 和 <col>组件只能相互嵌套。
建议使用高度属性设置组件高度，而非使用css控制，否则垂直居中的样式可能会受到影响。