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.

Main Axis: Center

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.

center
center
center
center

Main Axis: Start

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)

start
start
start
start

Main Axis: End

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)

end
end
end
end

Main Axis: Space Around

The layout-align="space-around" attribute will evenly distribute the cells and the space around them. (Stretches the cross axis by default)

Uno
Dos
Tres
Uno
Dos
Tres

Main Axis: Space Between

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)

Uno
Dos
Tres
Uno
Dos
Tres

Main Axis: Flex Cells

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.

Uno
Dos
Uno
Dos

Cross Axis

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.

Centered Horizontal And Vertical

Is it possible to center a layout's child cells by both the main and cross axes? Yes. Yes it is.

center center
center center
center center
center center

Main Axis Start, Cross Axis Center

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".

start center
start center
start center
start center

Main Axis End, Cross Axis Center

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.

end center
end center
end center
end center

Main Axis Center, Cross Axis Start

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.

center start
center start
center start
center start

Main Axis Start, Cross Axis Start

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.

start start
start start
start start
start start

Main Axis End, Cross Axis Start

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.

end start
end start
end start
end start

Main Axis Center, Cross Axis End

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.

center end
center end
center end
center end

Main Axis Start, Cross Axis End

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.

start end
start end
start end
start end

Main Axis End, Cross Axis End

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.

end end
end end
end end
end end