Skip to main content

Key Terminology for Flex

Concepts and definitions for core Flex functionality

Dallin Kay avatar
Written by Dallin Kay
Updated over a week ago

Position

Absolute:

An object’s position is set to a specific vertical and horizontal coordinate on the canvas, and nothing can change or affect it. “It absolutely will not move unless I manually do it myself.”

Stack:

An object stacks in line with all its siblings within its parent container. Stacked objects cannot overlap and cannot be freely placed on the canvas. The structure and order Stack provides are crucial for creating responsive content that restacks when canvas dimensions change.

Size

Fixed:

An object’s width/height is set to a fixed number of pixels. Fixed sizing does not responsively change.

Relative:

An object’s width/height is a percentage of its parent container's overall width/height. The set percentage is relative, so if the parent container changes size, the object will responsively adjust accordingly to maintain the same percentage (regardless of the actual number of pixels).

Fill:

An object’s width/height will expand to fill the available space within its parent container. If the parent container changes size, the object will responsively resize to continue to fill it (regardless of the actual number of pixels).

Fit Content:

A container’s (section, group, text box) width/height will wrap around, or fit, the width/height of its internal contents. No matter how wide or tall the contents become, the container will responsively resize to maintain its fit.

Layout

Smart “Flex” Layout:

When toggled on, the target container (section, group, text box) will organize its internal content in either a horizontal row or vertical column.

Wrap:

When a piece of internal content reaches the border of its horizontal Smart “Flex” container, the following internal content will restack, or wrap, onto a new horizontal row or vertical column.

Clip Content:

Shows or clips internal content that is bleeding, or overflowing, out of a Smart “Flex” container’s border.

Padding:

Adds additional white space, or padding, between the border of a container (canvas, section, group, text box)and its internal content. Padding can be set by percentage or a fixed number of pixels. It can also be set uniformly or independently for the top, bottom, left, and right sides.

Gap:

Adds additional white space, or gap, between Stacked internal content within a container (canvas, section, Smart “Flex” group). Gap is set by adding or removing pixels. Gap cannot be applied to objects with Absolute positioning (see Absolute description for more details).

Appearance

Background Fill:

Fills in the background of a container (canvas, section, group, text box) with a solid color, gradient, or image.

Border Radius:

Rounds the corners of a container’s (section, group, image container) border to a set radius. Can be set as a percentage or a fixed pixel amount.

Stroke:

Outlines a container’s (section, group, image container) border with a stroke of color. Can be styled as a solid, dashed, or dotted stroke.

Shadow:

Creates a shadow effect behind an object for an added illusion of depth. The angle and intensity of a shadow can be adjusted.

Text Styles:

Pre-configured text formatting that can be applied to any text box. Text styles can be created/updated for all levels of text (H1, H2, Paragraph, or custom elements like button CTAs). Text styles can also be set up to scale in size based on different responsive variants, ensuring a proper fit.

Content Organization

Content Hierarchy:

The order and structure by which all content in an experience follows. The hierarchy is as follows: Canvas > Section > Group > Content Container (i.e., Text Box or Image Container) > Content (i.e., text, image, or shape). All content responds and reacts to either its parent (above it in the hierarchy) or child (below it in the hierarchy) container within the content hierarchy.

If there is a group within a group, the outer group acts as the parent container and the inner group as the child container (Group > Group).

The canvas will always be the top layer of the hierarchy. Sections can not be placed within other sections or groups.

Canvas:

The outermost layer of the content hierarchy. The canvas serves as the backbone of all the content within an experience.

Section:

A stackable container used to organize and structure responsive content on the canvas. Although a section’s width is always set to fill the canvas, its height can be set to a fixed pixel size or to fit its internal content.

Group:

A versatile container that organizes content. Groups can also be used to structure, restack, and responsively resize content across multiple canvas variants.

Content Container:

Containers that are similar to a group, but designated for a specific type of content. For example, text boxes for text. Content containers share a variety of position, size, layout, and appearance options with groups, but they also include some specific to their type of content (i.e., text alignment for text boxes).

Responsive Variants:

Variants, or different versions, of the Base Canvas that are sized for different screen dimensions or device types (i.e., tablet or mobile).

Base Canvas:

The “source” canvas, from which all updates and content changes cascade. For example, if you change text on your desktop canvas (set as your base), it will also be added to your tablet and mobile canvases. You can choose between your desktop and mobile for your base canvas.

Cascading Updates:

All additions and updates cascade downward from canvas to canvas. For example, if you change a text color on your desktop canvas (set as the base), the update will cascade downward to the tablet and mobile canvas (Desktop > Tablet > Mobile). Or, if you applied the same change directly to your tablet canvas (instead of the desktop base canvas), it would cascade down the mobile canvas but not upward to the desktop (Tablet > Mobile).

Breakpoint Override:

Making changes to content on a canvas that is not the base will override the setup of the content on the base canvas. This is particularly useful when you want a different configuration on a mobile canvas than on a desktop. For example, changing a group’s size from Relative to Fixed so it fits on the smaller canvas better. All breakpoint overrides can be reset.

Did this answer your question?