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 < 600px |
| layout-gt-xs | width >= 600px |
| layout-sm | 600px <= width < 960px |
| layout-gt-sm | width >= 960px |
| layout-md | 960px <= width < 1280px |
| layout-gt-md | width >= 1280px |
| layout-lg | 1280px <= width < 1920px |
| layout-gt-lg | width >= 1920px |
| layout-xl | width >= 1920px |
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
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.
| hide (display: none) | show (negates hide) | Activates when: |
|---|---|---|
| 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 |