Flex

Flex widgets are Layout Fields that use CSS Flexbox to arrange child widgets using standard CSS flex-direction values. They are the primary tool for building responsive form layouts.

Programmatic

flex.ts

import { gui } from '@golemui/gui-shared';

export default [
  gui.layouts.flex([
    gui.inputs.textInput('v1', {
      label: 'Vertical Field 1',
      uid: 'v1',
    }),
    gui.inputs.textInput('v2', {
      label: 'Vertical Field 2',
      uid: 'v2',
    }),
  ], {
    direction: 'column',
    uid: 'flex_vertical',
  }),
];

JSON

flex.json

{
  "form": [
    {
      "uid": "flex_vertical",
      "kind": "layout",
      "type": "flex",
      "props": {
        "direction": "column"
      },
      "children": [
        {
          "uid": "v1",
          "kind": "input",
          "type": "textinput",
          "path": "v1",
          "label": "Vertical Field 1"
        },
        {
          "uid": "v2",
          "kind": "input",
          "type": "textinput",
          "path": "v2",
          "label": "Vertical Field 2"
        }
      ]
    }
  ]
}

Props

Use these props to customize your Flex widget.

prop	type	description
direction	string	CSS flex-direction: 'row', 'row-reverse', 'column', or 'column-reverse'. Defaults to 'column'
justify	string	Cross-axis alignment. In a row: vertical alignment of items (align-items). In a column: horizontal alignment of items (justify-items). Values: 'start', 'end', 'center', 'stretch'. Defaults to 'stretch'
align	string	Main-axis distribution. In a row: horizontal spacing (justify-content). In a column: vertical spacing (justify-content). Values: 'start', 'end', 'center', 'space-between', 'space-around', 'space-evenly'. Defaults to 'start'
gap	number	Space between children in pixels

Row Layout

Set direction to "row" to place child widgets side-by-side. On small screens (max-width: 480px), row layouts automatically stack vertically for better mobile usability.

Programmatic

flex.ts

import { gui } from '@golemui/gui-shared';

export default [
  gui.layouts.flex([
    gui.inputs.textInput('h1', {
      label: 'Left Field',
      uid: 'h1',
    }),
    gui.inputs.textInput('h2', {
      label: 'Right Field',
      uid: 'h2',
    }),
  ], {
    direction: 'row',
    uid: 'flex_horizontal',
  }),
];

JSON

flex.json

{
  "form": [
    {
      "uid": "flex_horizontal",
      "kind": "layout",
      "type": "flex",
      "props": {
        "direction": "row"
      },
      "children": [
        {
          "uid": "h1",
          "kind": "input",
          "type": "textinput",
          "path": "h1",
          "label": "Left Field",
          "size": 1
        },
        {
          "uid": "h2",
          "kind": "input",
          "type": "textinput",
          "path": "h2",
          "label": "Right Field",
          "size": 2
        }
      ]
    }
  ]
}

Row Reverse Layout

Set direction to "row-reverse" to place child widgets side-by-side in reversed order.

Programmatic

flex.ts

import { gui } from '@golemui/gui-shared';

export default [
  gui.layouts.flex([
    gui.inputs.textInput('rr1', {
      label: 'First Field',
      uid: 'rr1',
    }),
    gui.inputs.textInput('rr2', {
      label: 'Second Field',
      uid: 'rr2',
    }),
  ], {
    direction: 'row-reverse',
    uid: 'flex_row_reverse',
  }),
];

JSON

flex.json

{
  "form": [
    {
      "uid": "flex_row_reverse",
      "kind": "layout",
      "type": "flex",
      "props": {
        "direction": "row-reverse"
      },
      "children": [
        {
          "uid": "rr1",
          "kind": "input",
          "type": "textinput",
          "path": "rr1",
          "label": "First Field",
          "size": 1
        },
        {
          "uid": "rr2",
          "kind": "input",
          "type": "textinput",
          "path": "rr2",
          "label": "Second Field",
          "size": 1
        }
      ]
    }
  ]
}

Column Reverse Layout

Set direction to "column-reverse" to stack child widgets vertically in reversed order.

Programmatic

flex.ts

import { gui } from '@golemui/gui-shared';

export default [
  gui.layouts.flex([
    gui.inputs.textInput('cr1', {
      label: 'First Field',
      uid: 'cr1',
    }),
    gui.inputs.textInput('cr2', {
      label: 'Second Field',
      uid: 'cr2',
    }),
  ], {
    direction: 'column-reverse',
    uid: 'flex_column_reverse',
  }),
];

JSON

flex.json

{
  "form": [
    {
      "uid": "flex_column_reverse",
      "kind": "layout",
      "type": "flex",
      "props": {
        "direction": "column-reverse"
      },
      "children": [
        {
          "uid": "cr1",
          "kind": "input",
          "type": "textinput",
          "path": "cr1",
          "label": "First Field"
        },
        {
          "uid": "cr2",
          "kind": "input",
          "type": "textinput",
          "path": "cr2",
          "label": "Second Field"
        }
      ]
    }
  ]
}

Horizontal Alignment

Use align and justify together in a row layout to control both axes. align distributes items horizontally (main axis) and justify aligns them vertically (cross axis).

In this example, items are horizontally centered with align: "center" and vertically centered with justify: "center":

Programmatic

flex-horizontal-alignment.ts

import { gui } from '@golemui/gui-shared';

export default [
  gui.layouts.flex([
    gui.inputs.textInput('firstName', {
      label: 'First Name',
      uid: 'f1',
    }),
    gui.inputs.textInput('lastName', {
      label: 'Last Name',
      uid: 'f2',
    }),
  ], {
    direction: 'row',
    justify: 'center',
    align: 'center',
    gap: 16,
    uid: 'row_centered',
  }),
];

JSON

flex-horizontal-alignment.json

{
  "form": [
    {
      "uid": "row_centered",
      "kind": "layout",
      "type": "flex",
      "props": {
        "direction": "row",
        "justify": "center",
        "align": "center",
        "gap": 16
      },
      "children": [
        {
          "uid": "f1",
          "kind": "input",
          "type": "textinput",
          "path": "firstName",
          "label": "First Name",
          "size": 1
        },
        {
          "uid": "f2",
          "kind": "input",
          "type": "textinput",
          "path": "lastName",
          "label": "Last Name",
          "size": 1
        }
      ]
    }
  ]
}

Nested Alignment

Nest flex widgets to combine row and column layouts with independent alignment on each level. The outer row flex uses justify: "center" to vertically center the inner columns; each inner column flex uses align to control how its children distribute vertically.

Programmatic

flex-nested-alignment.ts

import { gui } from '@golemui/gui-shared';

export default [
  gui.layouts.flex([
    gui.inputs.calendar('calendar', {
      label: 'Calendar',
    }),
    gui.layouts.flex([
      gui.inputs.textInput('username', {
        label: 'Username',
      }),
      gui.inputs.password('password', {
        label: 'Password',
      }),
    ], {
      align: 'center',
      justify: 'start',
      direction: 'column',
    }),
  ], {
    direction: 'row',
    align: 'center',
    justify: 'stretch',
  }),
  gui.layouts.flex([
    gui.inputs.textInput('textinput', {
      label: 'Textinput',
    }),
    gui.inputs.numberInput('number', {
      label: 'Number',
    }),
    gui.inputs.checkbox('checkbox', {
      label: 'Checkbox cool',
    }),
  ], {
    direction: 'row',
    align: 'start',
    justify: 'end',
  }),
];

JSON

flex-nested-alignment.json

{
  "form": [
    {
      "kind": "layout",
      "type": "flex",
      "children": [
        {
          "kind": "input",
          "type": "calendar",
          "label": "Calendar",
          "path": "calendar"
        },
        {
          "kind": "layout",
          "type": "flex",
          "children": [
            {
              "kind": "input",
              "type": "textinput",
              "label": "Username",
              "path": "username"
            },
            {
              "kind": "input",
              "type": "password",
              "label": "Password",
              "path": "password"
            }
          ],
          "props": {
            "align": "center",
            "justify": "start",
            "direction": "column"
          }
        }
      ],
      "props": {
        "direction": "row",
        "align": "center",
        "justify": "stretch"
      }
    },
    {
      "kind": "layout",
      "type": "flex",
      "children": [
        {
          "kind": "input",
          "type": "textinput",
          "label": "Textinput",
          "path": "textinput"
        },
        {
          "kind": "input",
          "type": "number",
          "label": "Number",
          "path": "number"
        },
        {
          "kind": "input",
          "type": "checkbox",
          "label": "Checkbox cool",
          "path": "checkbox"
        }
      ],
      "props": {
        "direction": "row",
        "align": "start",
        "justify": "end"
      }
    }
  ]
}

Styling

Flex layouts can be styled as explained in the Styling Guide.

CSS Variables

Following you will find a list with the CSS Variables used to control spacing within the Flex widget.

CSS Variable	Description
--gui-space-4	Default gap between widgets

Anatomy

This is the anatomy of the Flex Widget in case you want to use your CSS styles.

flex-anatomy.html

<div class="gui-flex">
  <div class="gui-flex__widget gui-flex__widget--row gui-flex__widget--align-space-between" id="flex_uid">

    <gui-widget class="gui-flex__child">
      <!-- Child 1 content -->
    </gui-widget>

    <gui-widget class="gui-flex__child">
      <!-- Child 2 content -->
    </gui-widget>

  </div>
</div>