docs/app/partials/layout-container.tmpl.html
Use the layout directive on a container element to specify the layout direction for its children: horizontally in a row (layout="row") or vertically in a column (layout="column"). Note that row is the default layout direction if you specify the layout directive without a value.
| row | Items arranged horizontally. max-height = 100% and max-width is the width of the items in the container. |
| column | Items arranged vertically. max-width = 100% and max-height is the height of the items in the container. |
First item in row
Second item in row
First item in column
Second item in column
Note that layout only affects the flow direction for that container's immediate children.
As discussed in the Layout Introduction page you can make your layout change depending upon the device view size by using breakpoint alias suffixes.
To make your layout automatically change depending upon the device screen size, use one to the following layout APIs to set the layout direction for devices with view widths:
| API | Device width when breakpoint overrides default |
|---|---|
| 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 |
For the demo below, as you shrink your browser window width notice the flow direction changes to column for mobile devices (xs). And as you expand it will reset to row for gt-sm view sizes.
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 Layout Options page for more options such as padding, alignments, etc.