Components
/
Flexbox

Flexbox

The Flexbox component provides an efficient way to lay out, align and distribute space among its child components.

Ways to use a Flexbox

Create a Dynamic Button Panel

Add an inline Flexbox to a Table, Detail, or Card List component. Then, add multiple buttons to the FlexBox and apply visibility rules to conditionally show each button. 

Example: Add two buttons “Publish” and “Unpublish” with conditional rules to show each button when the relevant record’s status is “Unpublished” and “Published” respectively. 


Show Various Forms Based on Conditions

Add multiple Forms to a Flexbox and apply visibility rules to each so they display in the same exact location when different conditions are met. 

Distribute Components Evenly

Add multiple components to a Flexbox and apply padding/alignment settings to distribute components evenly.

Create Complicated Layouts

Nest a Flexbox within a Flexbox to create complicated layouts.

Configuring your Flexbox.

Main

Text

Name your flexbox so it’s easy to find later.

Components

This is where you’ll add child components to your Flexbox. Click the + to add components. 

Design

Overflow

When the components in your Flexbox exceed the size of the container, specify whether you want the overflow to be hidden, visible, or if you want the contents to be scrollable.

Children

This is where you’ll configure the layout settings for all child components in your Flexbox.

Lay out in

This controls the direction of the layout. 

 

Align Horizontally

This controls how components are aligned horizontally.

 

Align Vertically

This controls how components are aligned vertically.

Padding

This controls the padding between each child component.

Allow Wrapping

This allows the components to wrap to the next row if they don’t fit the width of the Flexbox. This setting may be useful when you expect the number of visible components to change (due to visibility rules) OR if you want the Flexbox to adjust as the screen width changes.

Combining with visibility rules

When you apply visibility rules to child components of a Flexbox, you can create dynamic tools like this: