# 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](https://css-pattern.com/). See [Sizing and positioning](/template-editor/advanced/sizing-positioning/) for sizing modes and position anchors.

## Block-specific properties

| 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. |

## Child properties

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](/template-editor/advanced/panels/) for help choosing and combining panel types.

## Templated content

Many properties can use [variables](/template-editor/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.