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

布局容器

布局和容器

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

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

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

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

  
First item in row
  
Second item in row




  
First item in column
  
Second item in column

请注意，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。

  

    I'm above on mobile, and to the left on larger devices.
  
  

    I'm below on mobile, and to the right on larger devices.
  

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