Explore a groundbreaking CSS technique that replicates container queries using a clever combination of flex-wrap, flex-basis, and flex-grow. Discover how Heydon Pickering's "Holy Albatross" method enables responsive layouts without traditional media queries. Learn to implement this powerful approach step-by-step, from basic setup to advanced applications, and understand its potential to revolutionize web design. Gain insights into flex properties, negative flex-basis, and precise sizing control while seeing practical examples of this technique in action.
Overview
Syllabus
- Introduction
- basic setup
- understanding flex-wrap
- understanding flex-basis
- understanding flex-grow and shrink
- putting them all together
- negative flex-basis
- no media query required
- getting it working at a precise size
- the true power of it
- outro
Taught by
Kevin Powell
