The Flexbox component provides an efficient way to lay out, align and distribute space among its child components.
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.
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.
Add multiple components to a Flexbox and apply padding/alignment settings to distribute components evenly.
Nest a Flexbox within a Flexbox to create complicated layouts.
Name your flexbox so it’s easy to find later.
This is where you’ll add child components to your Flexbox. Click the + to add components.
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.
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.
This controls how components are aligned horizontally.
This controls how components are aligned vertically.
This controls the padding between each child component.
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.
When you apply visibility rules to child components of a Flexbox, you can create dynamic tools like this: