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. 

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 new components or drag and drop existing components into your flex box. You can drag and drop to reposition flexbox child components or drag them outside of the flexbox as well.

Design

Layout

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.

‍

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 flexbox component, the containing unit is the flexbox.

‍

Snap to Grid: Set the edges of this component to snap to the grid canvas in the Space.

‍

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 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 flexbox'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 flexbox 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).

‍

‍

‍

‍

‍