Layout chevron_right Child Alignment

GitHub

The layout-align class 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 parameter value is required for this class. 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.

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

layout-row layout-align-center-center

one
two
three

Layout Direction

row
column

Alignment in Layout Direction

none
start (default)
center
end
space-around
space-between

Alignment in Perpendicular Direction

none
start
center
end
stretch (default) 
<div class="{{this.layoutClass}}{{this.layoutAlignClass}}">
  <div class="one">one</div>
  <div class="two">two</div>
  <div class="three">three</div>
</div>