Making the width/height relative

If the Flexbox component is defined as part of a "row" of Flexboxes, you can set the width of each column in the row relative to the other columns. If the Flexbox component is defined as part of a "column" of Flexboxes, you can set the relative height of each row.

To make the width/height of a Flexbox component relative to other Flexboxes, use this procedure:

Select the Flexbox for the width/height setting you want to change.
If you are working with nested Flexboxes, make sure you have the correct (nested) Flexbox selected (and not the parent Flexbox).
In the component Properties panel, select the Style tab.
From the list of styles, locate the Width or Height setting and click Show More.
Select the Relative option.
In the Value field, enter the ratio value to use for the selected Flexbox.
App Builder automatically changes the display as soon as you enter this value.
Note:
- Make relative settings for each Flexbox in the affected row or column. If you do not, then App Builder defaults a value of "1" for any Flexbox in which it is not otherwise defined.
- If one Flexbox in a row/column is set to a Relative value, and another is set to a Pixel value, the Pixel value takes precedence.
- You can use only integers in the Value field.