Flex Container

A flow container for grouping and arranging children. The workhorse of layout — most screens are a few of these nested two or three deep.

Reach for it when you need:

• A KPI row
• A side panel
• Any group of components that should flow together

Component name: FlexContainer · Category: Container

In the palette: Flexible layout container

Properties

Any property can be bound to a tag, another component's property, or a query.

Property	Type	Default	Description
direction	enum	row	Options: row · column · row-reverse · column-reverse.
wrap	enum	nowrap	Options: nowrap · wrap · wrap-reverse.
justify	enum	flex-start	Options: flex-start · center · flex-end · space-between · space-around · space-evenly.
alignItems	enum	stretch	Options: flex-start · center · flex-end · stretch · baseline.
alignContent	enum	flex-start	Options: flex-start · center · flex-end · stretch · space-between · space-around.
gap	number	12	—
padding	number	16	—
style	style	{}	Custom CSS properties

Events

Attach event actions to these in the Event Manager.

Event	Label	Group	Payload
click	Click	Mouse	The DOM event.
dblclick	Double click	Mouse	The DOM event.
contextmenu	Right click	Mouse	The DOM event.
mouseenter	Mouse enter	Mouse	The DOM event.
mouseleave	Mouse leave	Mouse	The DOM event.

Right-click behaves differently in the Designer

contextmenu fires your configured actions at runtime only — in LiveView and in preview. On the Designer canvas the right-click is captured to open the Event Manager, so testing it there will not run your actions. Test right-click in preview.

Notes

Two or three levels of nesting is readable. Six is a layout nobody will maintain.