The Flex Box component provides an efficient way to lay out, align and distribute space among its child components.
Create a Dynamic Button Panel
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 Flex Box 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 Flex Box and apply padding/alignment settings to distribute components evenly.
Create Complicated Layouts
Nest a Flex Box within a Flex Box to create complex layouts.
Name your Flex Box so it’s easy to find later.
This is where you’ll add child components to your Flex Box. Click the + to add new components or drag and drop existing components into your flex box. You can drag and drop to reposition Flex Box child components or drag them outside of the Flex Box as well.
Overflow: When the components in your Flex Box 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.
Left and Top options only appear for top-level components (components that are placed directly onto the Space canvas).
Left: Set the distance of this component from the left edge of the Space canvas (x-axis position). This can be expressed as a % of the canvas or as a number of pixels.
Top: Set the distance of this component from the top edge of the Space canvas (y-axis position). This can be expressed as a % of the canvas or as a number of pixels.
Width: Set the width of this component as a number of pixels or as a % of the containing unit.
Height: Set the height of this component as a number of pixels or as a % of the containing unit.
If the component is a top-level component, the containing unit is the Space canvas.
If the component is in-line within another component, the containing unit is the parent component.
If the component is within a Flex Box component, the containing unit is the Flex Box.
Snap to Grid: Set the edges of this component to snap to the grid canvas in the Space.
This is where you’ll configure the layout settings for all child components in your Flex Box.
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 Flex Box. This setting may be useful when you expect the number of visible components to change (due to visibility rules) OR if you want the Flex Box to adjust as the screen width changes.
When you apply visibility rules to child components of a Flex Box, you can create dynamic tools like what's shown below. Use width/height layout settings to control how you want different components to appear when they are visible.
For example, if you want a form to always take up 50% of a Flex Box's width when it's visible, you can set its width % to 50%. Or if you always want it to take up 300 pixels of width, you can set that as well, and the Flex Box will automatically adjust the other components to fit, based on what is visible. Note that if you set layout settings to be %-based and those %s add up to more than 100, settings will be based on the proportional total - Ex: if 3 components are set to 50% width each, all 3 will end up having 33% width (50/150).
Updated 9 months ago