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, whtn you have the same background (image/color/border) for a single object.
Place items directly on the grid when you want items to overlap relative to a card or composition. For example, overlapping a title on images.
Containers are best used for free-form compositions. Use containers when you want to include non-linear compositions or overlapping objects.
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.