Flex Panel

Use Flex Panels for layouts that flow in one direction: rows, columns, stacks, and bars. Add one from the left sidebar. Children flow in order and respond when content changes.

Common properties

Most blocks share these controls in the right sidebar. Selecting a child also shows controls for its parent layout.

Property	Details
Size	Width can be fixed, percentage-based, or automatic. Height can be fixed, flexible, or constrained by minimum and maximum values. Lock the aspect ratio to preserve proportions. Size values support variables.
Arrange	X and Y position blocks on the canvas or inside Free Panels, using fixed values or percentage anchors. Alignment controls place blocks at common positions. Rotate, flip, lock, or change the layer order.
Background	Choose a solid color, a linear, radial, or conic gradient, or a pattern. Colors support variables. Gradient stops have colors and positions and are sorted by position; linear and conic gradients also have an angle. Pattern colors and size support variables, with controls varying by pattern.
Border	Simple mode shares color, thickness, style, and radius across all sides. Advanced mode sets each side's color, thickness, and style and each corner's radius independently.
Shadow	Add layers of regular shadow, inner shadow, or glow, subject to the block-specific limits below.

Canvas and block backgrounds are separate: transparent areas reveal the parent or canvas. Patterns are based on CSS Pattern. See Sizing and positioning for sizing modes and position anchors.

Property	Details
Padding	Space inside the panel edge. Simple mode sets all sides; Advanced mode sets each side. Separate from gaps and child margins.
Direction	Row or column layout.
Wrap	Keep children on one line or allow wrapping.
Gap	Space between children.
Justify content	Distribution along the main direction.
Align items	Default alignment across the panel. Individual children can override it.

Select a child to adjust its behavior inside the Flex Panel.

Property	Details
Grow	How much the child expands when extra space is available.
Shrink	How much the child contracts when space is tight.
Align	Alignment override for this child.
Basis	Automatic or a specific starting size along the panel’s flow direction.
Margin	Extra space around this child.

See Advanced panels for help choosing and combining panel types.

Templated content

Many properties can use variables to assign their value when each image is created. Variables can be required, ignored, or given a fallback value. Pass values in template_values when rendering the template.