The Alignment properties determine how a Layer is positioned within its parent Layer along the horizontal and vertical axes.

Each Layer has two alignment settings:

• Horizontal Alignment: How the Layer aligns from left to right.
• Vertical Alignment: How the Layer aligns from top to bottom.

These properties affect both positioning and, when combined with “Auto” sizing, can also influence the size of the Layer.

Summary #

Alignment Type	Axis	Primary Effect	Notes
Left	Horizontal	Anchors to left edge	X=0 aligns with parent’s left side
Right	Horizontal	Anchors to right edge	X=0 aligns with parent’s right side
Center	Horizontal	Centers horizontally	X=0 aligns with parent’s center
Stretch	Horizontal	Expands width if Width=Auto	Origin behaves as Center
Top	Vertical	Anchors to top edge	Y=0 aligns with parent’s top side
Bottom	Vertical	Anchors to bottom edge	Y=0 aligns with parent’s bottom side
Center	Vertical	Centers vertically	Y=0 aligns with parent’s center
Stretch	Vertical	Expands height if Height=Auto	Origin behaves as Center

Categories of Alignment #

Alignment is divided into two independent categories:

• Horizontal Alignment
  • Available values:
    1. Left
    2. Right
    3. Center
    4. Stretch
• Vertical Alignment
  • Available values:
    1. Top
    2. Bottom
    3. Center
    4. Stretch

Each property functions independently, allowing combinations such as Left–Top, Center–Bottom, or Stretch–Stretch.

Positioning Behavior #

The alignment settings define the origin point from which the X and Y coordinates are applied.

Stretch Behavior #

The Stretch value for both Horizontal and Vertical alignment affects the layer’s size rather than just its position, but only when the corresponding dimension is set to “Auto”.

Content Alignment #

Some container Layers, like the Stack Layer or Group Layer, have their own Content Alignment properties.
These determine how child Layers are positioned within the container, rather than how the container itself is positioned in its parent.

Content Alignment acts as a “group-wide” alignment rule:

• Horizontal Content Alignment controls how children line up horizontally inside the container.
• Vertical Content Alignment controls how children line up vertically inside the container.

For example:

• A Stack Layer with Horizontal Orientation uses Horizontal Content Alignment to determine how each child aligns across the horizontal axis (e.g., Left, Center, Right, Stretch).
• When a container controls alignment, affected child Layers have those specific alignment properties disabled (grayed out) since the container is managing them automatically.

This system ensures that all children in a stack or grouped Layer remain evenly aligned and visually consistent while still allowing freedom on the opposite axis.