> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowx.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Container

> A container in FlowX.AI is a versatile building block that empowers you to group components and arrange them as needed, providing flexibility in UI design. It can also serve as the root component for your design.

![](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/release40/container_ex.gif)

The following properties can be configured in the container:

## Properties and settings

### Settings (applicable across all platforms)

These settings added in the **Generic** tab are available and they apply to all platforms including Web, iOS, and Android.

#### When used as root

When employed as the root component, the container offers the following settings:

* **Custom UI Payload**: A valid JSON describing the data sent to the frontend when the process reaches a specific user task.
* **Expressions (Hide condition)**: JavaScript expressions utilized to dynamically hide components based on conditions.

![](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/release40/container_root_new.png)

#### When not used as root

When the container is not used as the root, you can configure only the **Hide Condition** property.

![](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/release40/container_not_root.png)

With containers, you gain the ability to structure your UI elements efficiently, enhancing the overall design and usability of your application.

### Container settings overrides

You may want to override settings configured in the **Generic** tab to be displayed differently on mobile devices.

* **Hide expressions**: Use Overrides in the Settings tab to hide a container on a specific platform.

> [!NOTE]
>
> For instance, you can set a container to appear on all platforms, or create an override to hide it on mobile but show it on web.
>
> ![](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/release40/override_hide.gif)

To achieve this:

1. Select a Container element in the UI Designer, then navigate to Settings -> your desired platform -> Overrides (+) -> Expressions -> Hide.
2. Add your JavaScript Hide condition.

## Styling

> [tab] Web
>
> > [tab] Layout
> >
> > When designing for the web, consider the layout options available for the container. These options include:
> >
> > * **Position**
> >   * **Static**: This style remains fixed and does not scroll along with the page content.
> >   * **Sticky**: When the sticky property is enabled, the container maintains its position even during scrolling.
> >     * **Sticky layout**: You have the option to specify minimum distances between the container and its parent element while scrolling. At runtime, sticky containers will keep their position on scroll relative to top/ bottom/ right/ left margin of the parent element.
> >
> > ![](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/release40/Screenshot%202023-12-13%20at%2017.18.39.png)
> >
> > * **Direction**: Choose between **Horizontal** or **Vertical** alignment to define the flow of components. For example, select Horizontal for a left-to-right layout.
> > * **Justify (H)**: Specify how content is aligned along the main axis. For instance, select end to align items to the end of the container.
> > * **Align (V)**: Align components vertically within their container using options such as top, center, or bottom alignment.
> > * **Wrap**: Enable wrapping to automatically move items to the next line when they reach the end of the container. Useful for creating multi-line layouts.
> > * **Gap**: Define the space between components to control the distance between each item. Adjusting the gap enhances visual clarity and organization.
>
> > [tab] Sizing
> >
> > Adjusting the size of components is crucial for a responsive design. Fit W (width) offers three options:
> >
> > * **fill**: Fills the available space.
> > * **fixed**: Maintains a fixed width.
> > * **auto**: Adjusts the width automatically based on content.
> >
> > Fit H (height) offers two options:
> >
> > * **fixed**: Sets an exact height in pixels. Content that doesn't fit scrolls inside the container.
> > * **auto**: Adjusts the height automatically based on content.
> >
> > Fit H has no **fill** option, so a container can't stretch to the full height of the page. To make it taller, set Fit H to **fixed** and enter the height you need.

> [tab] iOS
>
> Similar styling considerations apply to iOS as for web.
>
> However, there are exceptions, particularly with **Sticky layout**:
>
> ![](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/release40/sticky_mobile.png)
>
> In mobile configurations, the right and left properties for **Sticky layout** are ignored by the iOS renderer.

> [tab] Android
>
> Similar styling considerations apply to Android as for web.
>
> However, there are exceptions, particularly with **Sticky layout**:
>
> ![Sticky layout on Android](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/release40/sticky_mobile.png)
>
> In mobile configurations, the right and left properties for **Sticky layout** are ignored by the Android renderer.

### Theme overrides

Customize the appearance by overriding style options coming from your default theme. Available overrides:

* Border width
* Border radius
* Border color
* Background color
* Shadow

More layout demos available below:

> [card] [Layout Demos](https://tburleson-layouts-demos.firebaseapp.com/#/docs)

For more information about styling and layout configuration, check the following section:

> [card] [UI Designer](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-designer.md#styles-tab)


## Related topics

- [Container app authentication](https://docs.flowx.ai/6.x/docs/saas/container-app-authentication.md)
- [Container app branding](https://docs.flowx.ai/6.x/docs/saas/container-app-branding.md)
- [Root Components in UI Design](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/root-components/root-components.md)
- [FlowX.AI 5.6.0 Release Notes](https://docs.flowx.ai/release-notes/v5.x/v5.6.0-march-2026/v5.6.0-march-2026.md)
- [FlowX.AI 4.7.9 Release Notes](https://docs.flowx.ai/release-notes/v4.x/v4.7.x-lts/v4.7.9-october-2025/v4.7.9-october-2025.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.