Flex containers

Avatar

By Stuart Marshall

updated almost 3 years ago

All of the Source 'layout' stacks (i.e. Container, Container Plus, Grid and Grid Plus) have the capability of displaying their content using flex. This enables us to have great control over how we align and distribute the content items that we add to these stacks. 

Note: The flex alignment options are only useful where there is more height than there is content. As such, in the same Source layout stacks we can set a minimum height of our container (for each breakpoint). 

Flex alignment can be especially useful if we are creating things like 'hero' banners on our page where we have a full height container and want our content centered. It is also really useful in the grid items as we can use it to distribute items in the same way - for example to always have a button at the bottom of each grid item, regardless of the amount of content above it. The uses for it are endless.

NOTE: The workaround described for third-party stacks (in last minute or so of video) is no longer required. A fix was implemented in Source so that most stacks would operate in the same way.

Did this answer your question?