---
tags:
- UI Page widgets
alias: user-guide-uipage-widgets-flex
widgetname: Flex
description: "This documentation explains how to use a flexible layout widget for arranging UI elements"
---

# Flex

![uiFlex Icon](images/flex_icon.png)

## Overview

The Flex Widget provides a mechanism to define a layout grid. In the following example we use a Flex widget to hold three buttons for a UI Page.

![ui Flex](images/flex_example.png)

## General Steps

{% include-markdown 'includes/pages/ui_widgets_general_steps.md' %}

![FlexGeneral](images/flex_general.png)

## Widget Customization

1. Optionally, in the **Style** tab, you can define a Border Width and Color.

    ![flexStyle](images/flex_style.png)

2. In the **Setup** tab, provide the direction of the flex.

    ![FlexSetup](images/flex_setup.png)

3. In the **Slots** tab, define the number of slots and their properties:

    * **Name** - Enter the name of the slot.
    * **Weight** - Specify the flexbox growth factor of the slot. This determines how much space the slot will occupy relative to other slots.
    * **Hide when disabled** - Choose whether to hide the slot when it is disabled by the action's `canExecute` property. If enabled, the slot will not be visible when the associated action cannot be executed. This option is set to `false` by default.
    * **Action** - Select the action to be performed from the MES system when the slot is activated.

    You can add as many slots as needed by selecting the :material-plus: button. To remove a slot, select the :material-trash-can: button.

    ![FlexSlots](images/flex_slots.png)

4. Optionally, define the **Inputs**. Note that some System Actions, such as Area, Material, or Maintenance System Actions, will have predefined inputs that cannot be modified. You may add additional inputs as needed.

    ![FlexEInputs](images/flex_inputs.png)

5. You can also define the **Links** between this widget and other elements of the UI Page.

    ![FlexLinks](images/flex_links.png)

6. By saving and closing the settings, the widget will be changed accordingly.