Skip to content

alignment.md

Latest commit

 

History

History
70 lines (53 loc) · 3.79 KB

alignment.md

File metadata and controls

70 lines (53 loc) · 3.79 KB
Raw
order 60

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.

Content packed against the top left cornerStart, Start Content centered horizontally against the top edgeCenter, Start Content packed against the top right cornerEnd, Start Content against the left edge, centered verticallyStart, Center Content centered on both axesCenter, Center Content against the right edge, centered verticallyEnd, Center Content packed against the bottom left cornerStart, End Content centered horizontally against the bottom edgeCenter, End Content packed against the bottom right cornerEnd, 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.

Boxes of different heights aligned on their top edgesStart Boxes of different heights centered on a common axisCenter Boxes of different heights aligned on their bottom edgesEnd Boxes stretched to a common heightStretch 
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.