Skip to main content

Overview

Control how children are aligned within an auto-layout frame. The primary axis runs in the direction of the layout (horizontal or vertical), while the counter axis runs perpendicular to it.

Parameters

string
required
The ID of the frame to modify
enum
Primary axis alignment (distribution along the layout direction)For horizontal layouts:
  • MIN - Align left
  • MAX - Align right
  • CENTER - Center horizontally
  • SPACE_BETWEEN - Distribute with space between items
For vertical layouts:
  • MIN - Align top
  • MAX - Align bottom
  • CENTER - Center vertically
  • SPACE_BETWEEN - Distribute with space between items
When set to SPACE_BETWEEN, the itemSpacing property is ignored as children will be evenly spaced.
enum
Counter axis alignment (alignment perpendicular to the layout direction)For horizontal layouts:
  • MIN - Align top
  • MAX - Align bottom
  • CENTER - Center vertically
  • BASELINE - Align text baselines
For vertical layouts:
  • MIN - Align left
  • MAX - Align right
  • CENTER - Center horizontally
  • BASELINE - Align text baselines

Response

Examples

Center-aligned button

Space-between navigation

Left-aligned form fields

Text baseline alignment

Understanding Axes

Horizontal Layout (HORIZONTAL)

  • Primary axis: Left to right →
  • Counter axis: Top to bottom ↓

Vertical Layout (VERTICAL)

  • Primary axis: Top to bottom ↓
  • Counter axis: Left to right →

Use Cases

Centered buttons: primaryAxisAlignItems: CENTER, counterAxisAlignItems: CENTER Navigation bars: primaryAxisAlignItems: SPACE_BETWEEN to distribute items evenly Form layouts: primaryAxisAlignItems: MIN to stack fields from top, counterAxisAlignItems: MIN to left-align Card headers: counterAxisAlignItems: CENTER to vertically center icon and title Text rows: counterAxisAlignItems: BASELINE to align text properly

Design Tips

  • SPACE_BETWEEN is perfect for distributing navigation items or card footers
  • Use CENTER/CENTER for buttons and call-to-action elements
  • BASELINE alignment ensures text looks aligned even with different font sizes
  • Combine with set_layout_sizing to control how children fill available space