布局容器

布局和容器

使用容器元素上的layout指令来为其子元素指定布局方向:水平排列（layout="row"）或垂直排列（layout="column"）。

请注意，如果指定的layout指令没有值，那么row是默认的布局方向。

• row: 水平排列的项目。 max-height = 100% 和 max-width 是容器中项目的宽度。

• column: 垂直排列的项目。 max-width = 100% 和 max-height 是容器中项目的高度。

<!-- 水平布局 -->
<div layout="row">
  <div flex>First item in row</div>
  <div flex>Second item in row</div>
</div>

<!-- 垂直布局 -->
<div layout="column">
  <div flex>First item in column</div>
  <div flex>Second item in column</div>
</div>

请注意，layout仅影响该容器的直接子元素的流向。

布局和响应断点

如布局简介中所介绍的，您可以使用断点 别名后缀 根据设备视图大小更改布局。

要使布局根据设备屏幕大小自动更改，请使用以下layout API之一为具有视图宽度的设备设置布局方向：

对于下面的代码，当缩小浏览器窗口宽度时，注意流动方向更改为移动设备（xs）的column。 当您展开时，它将重置为gt-sm视图大小的row。

<div layout="row" layout-xs="column">
  <div flex>
    I'm above on mobile, and to the left on larger devices.
  </div>
  <div flex>
    I'm below on mobile, and to the right on larger devices.
  </div>
</div>

有关更多选项（如填充，对齐等），请参阅“布局参数”章节。