docs/app/partials/layout-alignment.tmpl.html
The layout-align directive takes two words. The first word says how the children will be aligned in the layout's direction, and the second word says how the children will be aligned perpendicular to the layout's direction.
Only one value is required for this directive. For example, layout="row" layout-align="center" would make the elements center horizontally and use the default behavior vertically.
layout="column" layout-align="center end" would make children align along the center vertically and along the end (right) horizontally.
| API | Sets child alignments within the layout container |
|---|---|
| layout-align | Sets default alignment unless overridden by another breakpoint. |
| layout-align-xs | width < 600 px |
| layout-align-gt-xs | width >= 600 px |
| layout-align-sm | 600 px <= width < 960 px |
| layout-align-gt-sm | width >= 960 px |
| layout-align-md | 960 px <= width < 1280 px |
| layout-align-gt-md | width >= 1280 px |
| layout-align-lg | 1280 px <= width < 1920 px |
| layout-align-gt-lg | width >= 1920 px |
| layout-align-xl | width >= 1920 px |
Below is an interactive demo that lets you explore the visual results of the different settings:
one
two
three
Layout Directionrowcolumn
Alignment in Layout Direction ({{layoutDemo.direction == 'row' ? 'horizontal' : 'vertical'}})nonestart (default)centerendspace-aroundspace-between
Alignment in Perpendicular Direction ({{layoutDemo.direction == 'column' ? 'horizontal' : 'vertical'}})_none_startcenterendstretch (default)