docs/app/partials/layout-options.tmpl.html
I'm above on mobile, and to the left on larger devices.
I'm below on mobile, and to the right on larger devices.
See the Container Elements page for a basic explanation of layout directives.
To make your layout change depending upon the device screen size, there are other layout directives available:
| API | Activates when device |
|---|---|
| layout | Sets default layout direction unless overridden by another breakpoint. |
| layout-xs | width < 600 px |
| layout-gt-xs | width >= 600 px |
| layout-sm | 600 px <= width < 960 px |
| layout-gt-sm | width >= 960 px |
| layout-md | 960 px <= width < 1280 px |
| layout-gt-md | width >= 1280 px |
| layout-lg | 1280 px <= width < 1920 px |
| layout-gt-lg | width >= 1920 px |
| layout-xl | width >= 1920 px |
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 adds margin around each flex child. It also adds a margin to the layout container itself.
layout-padding adds padding inside each flex child. It also adds padding to the layout container itself.
layout-fill forces the layout element to fill its parent container.
Here is a non-trivial group of flex elements using layout-wrap
[flex=33]
[flex=66]
[flex=66]
[flex=33]
[flex=33]
[flex=33]
[flex=33]
layout-wrap allows flex children to wrap within the container if the elements use more than 100%.
Use the show hide APIs to responsively show or hide elements. While these work similar to ng-show and ng-hide, these AngularJS Material Layout directives are mediaQuery-aware.
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.
| hide (display: none) | show (negates hide) | Activates when: |
|---|---|---|
| hide-xs | show-xs | width < 600 px |
| hide-gt-xs | show-gt-xs | width >= 600 px |
| hide-sm | show-sm | 600 px <= width < 960 px |
| hide-gt-sm | show-gt-sm | width >= 960 px |
| hide-md | show-md | 960 px <= width < 1280 px |
| hide-gt-md | show-gt-md | width >= 1280 px |
| hide-lg | show-lg | 1280 px <= width < 1920 px |
| hide-gt-lg | show-gt-lg | width >= 1920 px |
| hide-xl | show-xl | width >= 1920 px |