Flex: Grid, Containers and Flexboxes (Flex v1.0)
Note: this article covers Flex v1.0. If Flex was added to your site after July 18, 2022, see our "Flex: Flex: Grid, Containers and Flexboxes (Flex 2.0)" doc.
There are three main areas to work within Flex: the Grid, Containers 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 a Container. 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.
Grid
Place items directly onto a grid when you want items to overlap relative to a card or composition. For example, overlapping a title on images.
Containers
Containers are best used for free-form compositions. Use containers when you want to include non-linear compositions or overlapping objects.
Flexbox
Flexboxes 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 Flexboxes when you have elements that are intended to be placed one after the other, like multiple buttons, labels, logos, etc.
