Flex

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

flex.ts

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

export default golemForm().create({
  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',
        },
      ],
    },
  ],
});

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

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.

flex.ts

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

export default golemForm().create({
  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,
        },
      ],
    },
  ],
});

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.

flex.ts

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

export default golemForm().create({
  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,
        },
      ],
    },
  ],
});

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.

flex.ts

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

export default golemForm().create({
  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',
        },
      ],
    },
  ],
});

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":

flex-horizontal-alignment.ts

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

export default golemForm().create({
  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,
        },
      ],
    },
  ],
});

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.

flex-nested-alignment.ts

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

export default golemForm().create({
  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',
      },
    },
  ],
});

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

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

Anatomy

This is the anatomy of the Flex Component 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>