Setting the Flexbox width/height

Depending on whether the Flexbox is defined as a "column" or a "row", you can set the width OR the height of a Flexbox component, but not both. The Flexbox components created as part of a page template definition might be defined either as columns or rows. You can tell by noting whether the Style setting is for the Width (column) or Height (row).

Note: The only way you can have both rows and columns in the same app is to have one type nested within the other. For instance, one page template has the basic Flexboxes arranged like this:

AB-Page Template

The primary orientation for this layout is horizontal, consisting of three rows. The second and third Flexboxes then each have two nested Flexboxes, set to a vertical orientation (columns). Keep this principle in mind when designing your apps.

Regardless of whether you are setting the width or the height, the basic principles apply to both. In each case, you can set the width/height to a relative value (that is, a value that is relative to other Flexboxes in the column/row); or you can set the width/height to an absolute pixel-based value.

If you are using relative settings, keep in mind that the widths or heights of the affected Flexbox components are set as ratios.

For example, suppose you have three Flexboxes in your workspace set up as three (vertical) columns. Now suppose that you want those vertical Flexboxes to be set up such that the first Flexbox is twice the width of the second Flexbox. You also want the third Flexbox to be twice as wide as the second Flexbox. This means that you effectively want the widths of the three Flexboxes to be set in a ratio of 2:1:2. When making the Width settings for these Flexboxes, then, you would use a Value of 2 for the first Flexbox, a Value of 1 for the second Flexbox, and a Value of 2 for the third Flexbox.