Addon · Flex

Two axes. Three keywords.

flex y stacks vertically. flex x aligns horizontally. Add center, space, start — that's the API.

Vertical · flex y

Stack children top-to-bottom. Add g-{n} for gap, center for alignment.

flex y g-12

flex y center g-12

flex y space

Align children left-to-right. Same modifiers, different axis.

flex x g-12

flex x center y center

flex x space y center

Direction

flex y    /* column */
flex x    /* row */
wrap      /* allow wrapping */

Alignment

center    /* main axis */
y center  /* cross axis */
space     /* space-between */
start, end

Gap

g-4, g-8, g-12, g-16
g-20, g-32, g-52, g-84

Full reference

Wrap behaviors, alignment shorthand, breakpoint utilities. Everything an AI needs to lay out flex correctly.