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 < 600px
layout-align-gt-xs width >= 600px
layout-align-sm 600px <= width < 960px
layout-align-gt-sm width >= 960px
layout-align-md 960px <= width < 1280px
layout-align-gt-md width >= 1280px
layout-align-lg 1280px <= width < 1920px
layout-align-gt-lg width >= 1920px
layout-align-xl width >= 1920px

Below is an interactive demo that lets you explore the visual results of the different settings:

one
two
three
Layout Direction row column
Alignment in Layout Direction ({{layoutDemo.direction == 'row' ? 'horizontal' : 'vertical'}}) none start (default) center end space-around space-between
Alignment in Perpendicular Direction ({{layoutDemo.direction == 'column' ? 'horizontal' : 'vertical'}}) none start center end stretch (default)