Containers and Flexboxes (1.0)

Modified on Fri, 18 Nov, 2022 at 6:00 AM

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.

Grid

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.

Note

To create a truly responsive design, we recommend you use the guidelines of the grid to snap items into place, instead of placing items in a freestyle manner on the grid. You can snap items into place as you drag and drop them into the grid, or you can use the alignment buttons in the design panel.

Containers

Containers are best for free-form compositions. Use containers when you want to include overlapping objects or non-linear compositions.

Flexbox

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).