Flexbox container query -- what am I missing?
See https://codepen.io/thejgc/pen/ogjLMKg for my code, including the following explanation:
There should be 5 buttons in this header would should be spaced out evenly, wherever possible.
Buttons
.one and .two are in a .lowerpriority section, but should be visible whenever there is enough width. As available width decreases, .two should be hidden, and then the whole .lowerpriority area.
I've set up container names and made sure the parent containers can flex their width with min-width: 0. But whatever I set the container query breakpoints size to, it always triggers.2 Replies
you can't use element you declared container on in @container query
Here are some videos about how to properly work with containers
https://youtu.be/2rlWBZ17Wes?si=wB1kVUXhDfpIsHeB
https://youtu.be/DHj7JhH8ins?si=8CkMVEUzZBF9E8el
Kevin Powell
YouTube
Learn how to use Media queries & Container queries
A dive into the world of media queries and container queries, covering the basics of how each works, the differences between them, when you might want to use one over the other, and more.
A big thanks to Geoff Graham for his help in making this video. https://geoffgraham.me/
🔗 Links
✅ Practical guide to responsive web design: https://yout...
Kevin Powell
YouTube
"Smart" design patterns with container queries
Container queries are more than just a media query that looks at the parent, it also is aware of the font-size of the parent, which opens up some interesting possibilities that media queries simply don’t do.
🔗 Links
✅ I’ve got courses! https://kevinpowell.co/courses?utm_campaign=general&utm_source=youtube&utm_medium=smartcontainerqueri...