The layout-align
attribute 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 perpindicular to the layout's direction.
Only one word is required for the attribute. 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.
layout-align | Sets child alignment. |
layout-align-sm | Sets child alignment on devices less than 600px wide. |
layout-align-gt-sm | Sets child alignment on devices greater than 600px wide. |
layout-align-md | Sets child alignment on devices between 600px and 960px wide. |
layout-align-gt-md | Sets child alignment on devices greater than 960px wide. |
layout-align-lg | Sets child alignment on devices between 960px and 1200px wide. |
layout-align-gt-lg | Sets child alignment on devices greater than 1200px wide. |
See below for more examples: