ObjectUIObjectUI

Flex

Flexible box layout container

Examples

Horizontal Layout

{
  "type": "flex",
  "gap": 3,
  "children": [
    {
      "type": "button",
      "label": "Button 1"
    },
    {
      "type": "button",
      "label": "Button 2"
    },
    {
      "type": "button",
      "label": "Button 3"
    }
  ]
}

Schema

interface FlexSchema {
  type: 'flex';
  direction?: 'row' | 'column';
  gap?: number;
  align?: 'start' | 'center' | 'end';
  justify?: 'start' | 'center' | 'end' | 'between';
  wrap?: boolean;
  children: SchemaNode[];
  className?: string;
}

On this page