Along with content positioning, content sizing and scaling are foundational principles when creating responsive experiences in Flex. Combined, they serve as the logical backbone behind how objects on the canvas behave across multiple responsive variants and dynamically changing screen dimensions.
Content Hierarchy
Understanding the content hierarchy in Flex is the first step to utilizing responsive content scaling. Essentially, the content included in an experience follows an established hierarchy that determines how and to what it scales in relation to. The content hierarchy is as follows:
Canvas
Section
Group
Individual Asset
In Flex, an object scales in relation to its parent container in the content hierarchy. So, if an individual asset is nested in a group, the group would be considered its parent container. If it's not in a group, then the section it is inside would be its parent container. So, of course, if the asset is not nested inside a group or section, then the canvas would be its parent container.
The same goes for groups, groups within groups, and to some degree, sections (though a section's width is always fixed).
Fixed Sizing
As the name suggests, Fixed sizing refers to when an object's width and/or height is set to a fixed number of pixels. For example, if a rectangle shape on the canvas is set to a fixed 100 pixels on the desktop variant, it will remain that size on all other variants as well. Essentially, Fixed sizing does not responsively scale across variants. So, a 100 pixel rectangle may look small on a desktop canvas that is 1800 pixels wide, but oversized on a mobile canvas with an 800 pixel width.
Fixed sizing is the default setting for all assets added to the canvas. To adjust a Fixed asset's size, select it, then resize as desired using the asset's bounding box. For precise resizing:
Select the target asset
Navigate to the "Position & Size" section of the Inspector Panel while in Design mode
Input the desired number of pixels in the W and H fields
Locked, uniform sizing is not available in the current build of Flex (beta)
Relative Sizing
Relative sizing refers to an object's size as a percentage of its parent container's overall size, rather than a fixed number of pixels. For example, if a rectangle shape on the canvas is set to a 30% Relative width, its width will be 30% of the total width of the canvas (its parent container).
Relative sizing is responsive because it is not dependent on a fixed number of pixels. So the rectangle will be 30% of a 1800 pixel-wide canvas on the desktop variant, and 30% of an 800 pixel-wide mobile variant canvas. As the canvas (or screen width) continuously changes dimensions, the rectangle will responsively scale and resize in order to remain 30% wide, no matter the size in pixels.
To set an object's sizing to Relative:
Select the target object on the canvas
Reminder, though the above example refers to an individual asset (rectangle), Relative sizing can be applied to groups as well
Navigate to the "Position & Size" section of the Inspector Panel while in Design mode
Click on the px icon within the W or H field
Select "Relative" from the drop down menu
Input the desired relative percentage
Hug Content Scaling
Hug Content is a scaling method in which a parent container dynamically resizes to fit its internal content. For example, suppose a group containing a rectangle shape is set to Hug Content, and the rectangle is enlarged. In that case, the group's dimensions will automatically increase to ensure it still contains the rectangle, regardless of its pixel size.
Hug Content is also commonly used with text boxes in Flex. For example, if the text box's height is set to Hug Content, it will continuously lengthen as additional lines of text are added. Similarly, if the font size of the text is decreased in a mobile variant, the text box will shorten with the smaller size of the characters.
To set an object's sizing to Hug Content:
Select the target object on the canvas
Note: Besides text boxes, Hug Content can not be applied to individual assets because they are the bottom level of the content hierarchy in Flex and therefore do not contain internal content
Navigate to the "Position & Size" section of the Inspector Panel while in Design mode
Click on the px icon within the W or H field
Select "Hug Content" from the drop down menu
Using Hug Content in combination with groups and text boxes is an efficient way to create responsive tiles and buttons in Flex (documentation for this process coming soon).
Fill Scaling
Fill refers to a scaling method exclusive to groups in which a group will expand to fill its parent container's width and/or height. Fill is a responsive scaling method because it will continuously resize to fill its parent dimension(s) regardless of its actual size in pixels.
Fill is especially useful when you want a group to retain its structure across multiple responsive variants. Perhaps when adding a background fill color (documentation on this process coming soon) to the group to serve as a full-width, responsive content background. Or when using a group with Inline positioning.
To set a group's sizing to Fill:
Select the target group on the canvas
Navigate to the "Position & Size" section of the Inspector Panel while in Design mode
Click on the px icon within the W or H field
Select "Fill" from the drop down menu
It's important to note that an object's sizing is set per axis, and in many cases, you may want to use different sizing methods for the object's width and height. For example, you may want a group's width to fill the entire width of the canvas (its parent container), but set its height to Hug Content so it automatically lengthens as content is added or edited within. The key is understanding the various sizing and scaling methods and knowing when to employ them to create responsive experiences in Flex.