Angular Material 教程之布局篇 (四) : 子元素对齐

发布时间：2020-12-17 09:51:08 所属栏目：安全来源：网络整理

导读：子元素对齐 layout-align 指令需要两值。第一个值表示子元素如何在布局的水平方向上对齐，第二个值表示子元素如何在布局的垂直方向上对齐。当指令中只有一个值的时候。例如， layout="row" layout-align="center" 将使元素居中水平，并垂直使用默认行为。

子元素对齐

layout-align指令需要两值。第一个值表示子元素如何在布局的水平方向上对齐，第二个值表示子元素如何在布局的垂直方向上对齐。

当指令中只有一个值的时候。例如，layout="row" layout-align="center" 将使元素居中水平，并垂直使用默认行为。

layout="column" layout-align="center end"将使子元素沿着中心垂直和沿着水平端（右）对齐。

API	在布局容器中设置子元素对齐
layout-align	设置默认对齐，除非被另一个断点覆盖。
layout-align-xs	width < 600px
layout-align-gt-xs	width >= 600px
layout-align-sm	600px <= width < 960px
layout-align-gt-sm	width >= 960px
layout-align-md	960px <= width < 1280px
layout-align-gt-md	width >= 1280px
layout-align-lg	1280px <= width < 1920px
layout-align-gt-lg	width >= 1920px
layout-align-xl	width >= 1920px

这里是可用的布局参数和对齐参数:

布局方向	对齐方向(水平)	对齐方向(垂直)
row	none	none
column	start (默认)	start
center		center
end		end
space-around		stretch (默认)
space-between

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!