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:

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