Specifying padding in a Flexbox

In a Flexbox component, the padding determines how much space is to be kept clear around the outside of the Flexbox. You can set the padding to be the same for all four sides of the Flexbox, or you can set the padding for each side individually. All padding settings are specified in pixels.

To set the padding for a Flexbox component, use this procedure:

  1. Select the Flexbox in the workspace.
  2. In the component Properties panel, select the Style tab.
  3. In the list of Style settings, locate the Padding option and click Show More.
  4. Select one of the primary options:
    • All Sides (default) - This option sets the padding for all four sides to the same value.

      If you select this option, App Builder displays only one Padding field in which to specify the number of pixels for the padding.

    • Individual - This option allows you to set the padding for each side of the Flexbox to a different value.

      If you select this option, App Builder displays four Padding fields in which to specify the number of pixels for padding--one each for the Top, the Right side, the Bottom, and the Left side.

    Note: Although Flexbox components do not have a setting option for borders, you can use this and other settings to create apparent borders. See Creating an apparent border for a Flexbox.