Flex Terminology (1.0)

The following provides definitions for terminology specifically related to Flex and Flex Mode.

Breakpoint. The size where the design adjusts for a specific screen width. Breakpoints enable designs to be responsive as they scale up and down. Default breakpoints in Flex mode are desktop, widescreen, tablet, mobile, and mobile landscape. You can switch between breakpoints at the top of the page by clicking the respective view. For more information, see Flex Overview (1.0).

Grid. The vertical and horizontal lines that give structure to the page. The grid itself does not contain content, but it enables you to arrange your content.

Cell. These are the spaces created by the vertical and horizontal lines of the grid and all of them are the same size. Cells are created by adding rows and columns to the grid. These act as guidelines for adding elements more accurately across breakpoints.

Container. An object that can include additional objects with freestyle editing capabilities (including widgets, inner containers, flexbox, and so on). Additionally, you can add columns and rows to a container, much like an inner grid. Placing elements in a container enables you to manipulate all of the elements at once like repositioning, setting background, duplicating. For more information on when to use a container, see Containers and Flexboxes (1.0).

Flexbox. A container with elements automatically set in a vertical or horizontal layout. Control the layout direction from the design panel. Flexboxes automatically distribute elements evenly. While this can be achieved using a container and adding rows and columns, this is an easier way to ensure elements stay distributed evenly throughout the section. Different layouts may be used for different breakpoints. For more information, see Flex Breakpoints (1.0). For more information on when to use a flexbox, see Containers and Flexboxes (1.0).

Rows. For more information on editing rows inline, see Row Editor and Arrange Content.

Columns. For more information on using columns inline, see Arrange Content.