Child elements of a layout element can be aligned using the layout-align
attribute. In each demo, the center black line represents the "main axis",
which is the primary axis along which child element are laid out. For a row layout,
child elements will line up horizontally along the main axis. For a column layout,
child elements will line up vertically along the main axis. Alternatively, the "cross axis"
is the imaginary line perpendicular to the black main axis line.
The layout-align="center"
attribute will center the cells across the main axis.
Note that each demo's center black line represents the "main axis". Additionally, by default
each item will "stretch" the cross axis, which is explained later.
The layout-align="start"
attribute will position the cell to the left for a
a row layout, and at the top for a column layout. (Stretches the cross axis by default)
The layout-align="end"
attribute will position the cell to the right for a
a row layout, and at the bottom for a column layout. (Stretches the cross axis by default)
The layout-align="space-around"
attribute will evenly distribute
the cells and the space around them. (Stretches the cross axis by default)
The layout-align="space-between"
attribute will evenly distribute
the cells and the free space between them, with the first cell is aligned
at the start, and the last cell aligned at the end. (Stretches the cross axis by default)
This demo shows how a layout's child cells react when the flex
attributes
are added to the cells. Here the free space is evenly divided up within the two
cells, giving each cell 50% of the area. Note how setting an align attribute wouldn't matter
because there is no free space between the cells for the cells to be aligned to. Since
each flex cell is using up all of the free space, there's no arranging that could happen.
The "cross axis" is the imaginary line perpendicular to the "main axis", which in each
demo is the center black line. The value within the value of the layout-align
attribute is always the main axis, and by default the cross axis is always "stretch", as seen
in the demos above. However, to also explicitly set the cross axis by providing
both the main and cross axis values, which are separated by a space.
Is it possible to center a layout's child cells by both the main and cross axes? Yes. Yes it is.
The layout-align="start center"
attribute packs up all of the cells at the "start" of the main axis,
and in the "center" of the cross axis. Note that each demo's center black line represents the
"main axis", which makes the imaginary perpendicular line the "cross axis".
The layout-align="end center"
attribute packs up all of the cells at the
"end" of the main axis, and in the "center" of the cross axis.
The layout-align="center start"
attribute packs up all of the cells at the
"center" of the main axis, and at the "start" of the cross axis.
The layout-align="start start"
attribute packs up all of the cells at the
"start" of the main axis, and at the "start" of the cross axis.
The layout-align="end start"
attribute packs up all of the cells at the
"end" of the main axis, and at the "start" of the cross axis.
The layout-align="center end"
attribute packs up all of the cells at the
"center" of the main axis, and at the "end" of the cross axis.
The layout-align="start end"
attribute packs up all of the cells at the
"start" of the main axis, and at the "end" of the cross axis.
The layout-align="end end"
attribute packs up all of the cells at the
"end" of the main axis, and at the "end" of the cross axis.