Angular Material 教程之布局篇 (二) : 布局容器

布局容器

布局和容器

使用容器元素上的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之一为具有视图宽度的设备设置布局方向：

layout API	flex API	激活设备时
layout	flex	设置默认布局方向,除非被另一个断点覆盖。
layout-xs	flex-xs	width < 600px
layout-gt-xs	flex-gt-xs	width >= 600px
layout-sm	flex-sm	600px <= width < 960px
layout-gt-sm	flex-gt-sm	width >= 960px
layout-md	flex-md	960px <= width < 1280px
layout-gt-md	flex-gt-md	width >= 1280px
layout-lg	flex-lg	1280px <= width < 1920px
layout-gt-lg	flex-gt-lg	width >= 1920/b>px
layout-xl	flex-xl	width >= 1920px

对于下面的代码，当缩小浏览器窗口宽度时，注意流动方向更改为移动设备（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>

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