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
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 within a group, the group is considered its parent container. If it's not in a group, its parent container is the section it's in. So, of course, if the asset is not nested inside a group or section, the canvas is 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-wide 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
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 on the canvas is set to a 30% Relative width, its width will be 30% of the canvas's (its parent container's) total width.
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) changes, the rectangle will scale responsively to remain 30% wide, regardless of its 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 all groups and assets
Navigate to the 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
Fit Content
Fit 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 is set to Fit 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.
Fit Content is also commonly used with text boxes in Flex. For example, if the text box's height is set to Fit Content, it will keep growing as more lines of text are added. Similarly, if the font size of the text is decreased in a mobile variant, the text box will shorten as the characters get smaller.
To set an object's sizing to Fit Content:
Select the target object on the canvas
Note: Besides text boxes, Fit 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 Size section of the Inspector Panel while in Design mode
Click on the px icon within the W or H field
Select "Fit Content" from the drop down menu
Using Fit Content in combination with groups and text boxes is an efficient way to create responsive tiles and buttons in Flex. To learn more, check out our self-paced course, Responsive Buttons and Tiles. The course is a part of our Flex Foundations certification and learning program.
Fill Parent
Fill Parent is a scaling method in which an object's width and/or height will expand to fill the available space within its parent container. Fill Parent is a responsive scaling method because it allows the object to continuously resize to fill its parent dimension(s) regardless of its actual size in pixels.
Fill Parent is especially useful when you want a group to retain its structure across multiple responsive variants. Perhaps when adding a background fill color to the group to serve as a full-width, responsive content background.
To set Fill Parent sizing:
Select the target object on the canvas
Navigate to the Size section of the Inspector Panel while in Design mode
Click on the px icon within the W or H field
Select "Fill Parent" 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 its width and height. For example, you may want a group's width to fill the entire width of a section (its parent container), but set its height to Fit Content. Hence, 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.