大佬教程收集整理的这篇文章主要介绍了Angular Material 教程之布局篇 (二) : 布局容器，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

布局容器@H_674_1@

布局和容器

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

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

• @H_489_5@column: 垂直排列的项目。 @H_489_5@max-width = 100% 和 @H_489_5@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>

布局和响应断点

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

要使布局根据设备屏幕大小自动更改，请使用以下@H_489_5@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

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

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

大佬总结

以上是大佬教程为你收集整理的Angular Material 教程之布局篇 (二) : 布局容器全部内容，希望文章能够帮你解决Angular Material 教程之布局篇 (二) : 布局容器所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。