<div layout="row" layout-sm="column">
<div flex="">
I'm above on mobile, and to the left on larger devices.
</div>
<div flex="">
I'm below on mobile, and to the right on larger devices.
</div>
</div>
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, Padding, Wrap and Fill
<div layout="row" layout-margin="">
<div flex="">Parent layout and this element have margins.</div>
</div>
<div layout="row" layout-padding="">
<div flex="">Parent layout and this element have padding.</div>
</div>
<div layout="row" layout-fill="" style="min-height: 224px;">
<div flex="">Parent layout is set to fill available space.</div>
</div>
<div layout="row" layout-padding="" layout-margin="" layout-fill="" style="min-height: 224px;">
<div flex="">I am using all three at once.</div>
</div>
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
<div layout="row" layout-wrap="">
<div flex="33">[flex=33]</div>
<div flex="66">[flex=66]</div>
<div flex="66">[flex=66]</div>
<div flex="33">[flex=33]</div>
<div flex="33">[flex=33]</div>
<div flex="33">[flex=33]</div>
<div flex="33">[flex=33]</div>
</div>
layout-wrap allows flex children to wrap within the container if the elements use more
than 100%.
Show & Hide
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.
<div layout="row">
<div hide="" show-gt-sm="" flex="">
Only show on gt-sm devices.
</div>
<div hide-gt-sm="" flex="">
Shown on small and medium.<br>
Hidden on gt-sm devices.
</div>
<div show="" hide-gt-md="" flex="">
Shown on small and medium size devices.<br>
Hidden on gt-md devices.
</div>
<div hide="" show-md="" flex="">
Shown on medium size devices only.
</div>
<div hide="" show-gt-lg="" flex="">
Shown on devices larger than 1200px wide only.
</div>
</div>Hidden on gt-sm devices.
Hidden on gt-md devices.
| 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 |