Flex & Containers
Unlike the printed page, web content and context can be unpredictable. CSS provides tools to manage that uncertainty – either explicitly with tools like @media and container queries, or implicitly with flexbox.
CodePen Demos
- Flexbox is inline-ish
- Flex (live)
- Flexbox alignment
- CSS gradient-art decorations
- Random flex
- Flex-basis layouts?
- CSS is Rad
- Media vs Container
- Inline Flow
- Block Flow
- Media vs Container (Live Demo)
- Understanding containment
- Containing Size
- Enter the 36 Chambers
- Size queries, relative/var units
- Flexbox cards, with Container Queries
- Custom Element w/ Container Query
- Name-only queries
- Web component style query parameters
- List outdent with range style queries
- Style queries and computed values
- Scroll-state
Resources
- Ethan Marcotte, Responsive Web Design
- MDN, Using Container Scroll-State Queries