Subdividing the area inside a Flexbox

There might be times when you need the area inside a Flexbox to be subdivided for the purpose of using the space more effectively. App Builder makes it easy to subdivide the space inside a Flexbox by adding columns or rows.

When you want to divide the Flexbox into two or more vertical spaces side-by-side, add columns. When you want to divide the Flexbox into two or more horizontal spaces stacked on top of one another, add rows.

In reality, you are not adding either true rows or columns. You are actually adding two or more "sub-Flexboxes" and nesting them inside the original Flexbox. Each "subdivided" space, then, is a Flexbox component in its own right, and it can be defined and designed more or less independently of other Flexboxes. Of course, that is not entirely true, as the settings for one Flexbox often affect the layout and appearance of neighboring Flexboxes.

Adding columns or rows

To subdivide a Flexbox, use this procedure:

In the workspace, select the Flexbox you want to subdivide.
In the component Properties panel, select the Content tab.
To subdivide the Flexbox vertically, click Add Column. To subdivide the Flexbox horizontally, click Add Row.
To subdivide into multiple "columns" or "rows" (or if multiple columns/rows already exist), click the plus ( + ) icon for each additional column or row to add.
Any content that exists in the original Flexbox stays in that Flexbox, and the new Flexbox is empty.