Creating an apparent border for a Flexbox

Flexbox components in App Builder do not include a setting to create borders around the Flexbox. You can, however, use nested Flexboxes and the Padding setting for Flexboxes to create apparent borders. This topic provides the basic procedure for how to do this.

To create an apparent border for a Flexbox component, use this procedure:

  1. Select the Flexbox in the workspace.
  2. On the Content tab, click Add Column.
    This divides the Flexbox into two nested Flexboxes.
  3. Select one of the nested Flexbox components.
  4. On the Style tab, locate the Width option and click Show More.
  5. Select the Relative option and set the Value to 0 (zero).
    This effectively hides that nested Flexbox and allows the other Flexbox to fill the entire space.
    Note: Should you decide later to "unhide" the hidden Flexbox, you can do so.

    See Making a hidden component visible.

  6. Select the original Flexbox component and set the background color.
  7. Select the nested Flexbox component and set the background color to a contrasting color.
    Note: Do not set this color to None.
  8. Adjust the thickness of the border by resetting the Padding value.