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

子元素对齐

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

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

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

API在布局容器中设置子元素对齐
layout-align设置默认对齐,除非被另一个断点覆盖。
layout-align-xswidth < 600px
layout-align-gt-xswidth >= 600px
layout-align-sm600px <= width < 960px
layout-align-gt-smwidth >= 960px
layout-align-md960px <= width < 1280px
layout-align-gt-mdwidth >= 1280px
layout-align-lg1280px <= width < 1920px
layout-align-gt-lgwidth >= 1920px
layout-align-xlwidth >= 1920px

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

布局方向对齐方向(水平)对齐方向(垂直)
rownonenone
columnstart (默认)start
centercenter
endend
space-aroundstretch (默认)
space-between
    原文作者:DemoPark
    原文地址: https://segmentfault.com/a/1190000007217802
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞