When adding widgets and design elements in Flex, you can choose to use Containers and Flexboxes. However, there are some key differences between them. The following provides information and examples on when to use a Container, a Flexbox, and when you may want to add elements directly on the grid.
As a general rule, if you want an automatic layout that includes ordering items in a horizontal or vertical list, use a Flexbox. If you want to create a freestyle composition with overlapping elements, use a Container.
The grid is the base layer that defines the rows and columns in your section, and they contain containers and flexboxes. Place items on the grid directly when you want items to overlap relative to a card or composition. For example, adding On Sale labels, interesting titles, and so on.
Containers are best for free-form compositions. Use containers when you want to include overlapping objects or non-linear compositions.
Use a Flexbox when you want to create an automatic layout that includes ordering items in a horizontal or vertical list. Additionally, you should add elements to a Flexbox when you have items you want placed one after the other (for example, multiple CTAs, labels, logos, and so on).