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 horizontal layout, child elements will line up horizontally along the main axis. For a vertical 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 horizontal layout, and at the top for a vertical 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 horizontal layout, and at the bottom for a vertical 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