Flex: Grid, Containers and Flexboxes (Flex v2.0)

Note: this article covers Flex v2.0. If Flex was added to your site before July 18, 2022, see our "Flex: Flex: Grid, Containers and Flexboxes (Flex v1.0)" doc.

There are three main areas to work within Flex: the Advanced Grid, Flex Columns, and Flexboxes. This article will discuss the differences between them, and when to use one instead of another.

As a general rule, if you want to create a freestyle composition with overlapping elements, use an Advanced Grid within a Flex Column. If you want to use an automatic layout that includes ordering items in a horizontal or vertical list, use a Flexbox.

Sometimes, there is no right or wrong answer, and there are several ways to achieve the same design goal. For example, when you have the same background (image/color/border) for a single object.

Advanced Grid

Advanced grids are best used for free-form compositions. Use advanced grids when you want to include non-linear compositions or overlapping objects.

Flex Column

Flex columns should be used when you want to create an automatic layout where items are ordered in a horizontal or vertical list. Additionally, you should use Flex columns when you have elements that are intended to be placed one after the other, like multiple buttons, labels, logos, etc.

Flexbox

Flexboxes can be added into flex columns and functions similar to columns by creating an automatic layout where items are ordered in a horizontal or vertical list. You can think of Flexboxes as "containers" to group specific elements within a given column, allowing those elements to be listed in a specific horizontal or vertical order within the flex column.