布局参数
I'm above on mobile, and to the left on larger devices.
I'm below on mobile, and to the right on larger devices.
有关布局指令的基本说明，请查看“布局和容器”章节。
要根据设备屏幕大小更改布局，还有其他layout指令可用：
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
布局外边距，内边距，换行和填充
Parent layout and this element have margins. Parent layout and this element have padding. Parent layout is set to fill available space. I am using all three at once.
layout-margin在每个flex子元素周围添加边距。 它还为布局容器本身添加了一个边距。
layout-padding在每个flex子元素内部添加padding。 它还向布局容器本身添加了填充。
layout-fill强制布局元素填充其父容器。
layout-wrap如果元素占用超过100％，允许flex子元素在容器中换行。
这里是使用layout-wrap的一组flex元素:
[flex=33] [flex=66] [flex=66] [flex=33] [flex=33] [flex=33] [flex=33]
显示和隐藏
使用show hide API来响应显示或隐藏元素。 虽然这些工作类似于ng-show和ng-hide，但这些Angular Material Layout指令是通过媒体查询感知的。
Only show on gt-sm devices.
Shown on small and medium.
Hidden on gt-sm devices.
Shown on small and medium size devices.
Hidden on gt-md devices.
Shown on medium size devices only.
Shown on devices larger than 1200px wide only.
隐藏 (display: none)
显示 (否则隐藏)
激活条件:
hide-xs
show-xs
width < 600px
hide-gt-xs
show-gt-xs
width >= 600px
hide-sm
show-sm
600px <= width < 960px
hide-gt-sm
show-gt-sm
width >= 960px
hide-md
show-md
960px <= width < 1280px
hide-gt-md
show-gt-md
width >= 1280px
hide-lg
show-lg
1280px <= width < 1920px
hide-gt-lg
show-gt-lg
width >= 1920px
hide-xl
show-xl
width >= 1920px
