@container CSS

Based on container size

Each @media CSS query has a matching .container-[prefix] class that enables you to have grid columns and responsive utilities respond to changes in container widths instead of viewport widths.

A container class will always take precedence over an @media query.

Flexi comes with a container mixin you can add to components which generates the updates appropriate class based on it's width.

The <container></container> and <grid responsive></grid> elements are actually Ember components which implement this mixin.

📘

Why do I need this?

This is useful for when you have a page with several moving parts, such as a few panels that can be resized and you want your flexi elements to recalculate their layouts when the panels resize or move, and not only when the whole viewport width changes.