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.