Alignment

Alignment answers one question: where does a child sit inside the space it was given, when it does not fill that space.

Alignment has four cases, and they mean the same thing on both axes.

Case	Horizontal	Vertical
`Start`	left	top
`Center`	centered	centered
`End`	right	bottom
`Stretch`	fill the width	fill the height

The Nine Positions

Group and Grid take a horizontal and a vertical alignment, which together give the nine positions below.

Start, Start

Center, Start

End, Start

Start, Center

Center, Center

End, Center

Start, End

Center, End

End, End

use Atelier\Layout\Alignment;
use Atelier\Layout\Element\Group;

Group::of('root')
    ->align(Alignment::End, Alignment::Start)
    ->add($content);

Grid::align() takes the same pair and applies it to every slot, and GridBuilder::add() accepts alignX and alignY to override it for one item.

Cross-Axis Alignment In A Stack

A stack aligns its children on the cross axis only: the main axis is governed by gap and distribution. alignItems() takes a single Alignment.

Start

Center

End

Stretch

use Atelier\Layout\Alignment;
use Atelier\Layout\Element\Stack;

Stack::row('legend')
    ->gap(8)
    ->alignItems(Alignment::Stretch)
    ->add($swatch)
    ->add($label);

Stretch only has an effect on a child that accepts being resized. A Frame::fixed() keeps its size and falls back to Start.

Alignment In Text

TextBlock::align() takes the same enum, with one difference worth knowing: Stretch behaves like Start. Layout does not justify ](../text, so there is nothing to stretch. See Text.