Skip to content
GolemUI

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',
        },
      ],
    },
  ],
});

Props

Section titled “Props”

Use these props to customize your Flex component.

proptypedescription
directionstringCSS flex-direction: 'row', 'row-reverse', 'column', or 'column-reverse'. Defaults to 'column'
justifystringCross-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'
alignstringMain-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'
gapnumberSpace between children in pixels

Row Layout

Section titled “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,
        },
      ],
    },
  ],
});

Row Reverse Layout

Section titled “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,
        },
      ],
    },
  ],
});

Column Reverse Layout

Section titled “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',
        },
      ],
    },
  ],
});

Horizontal Alignment

Section titled “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,
        },
      ],
    },
  ],
});

Nested Alignment

Section titled “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',
      },
    },
  ],
});

Styling

Section titled “Styling”

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

CSS Variables

Section titled “CSS Variables”

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

CSS VariableDescription
--gui-space-4Default gap between widgets

Anatomy

Section titled “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>