Container queries are possible!
VloĆŸit
- Äas pĆidĂĄn 1. 06. 2024
- Long thought impossible, Heydon Pickering has found a way to replicate the idea of container queries using a cool CSS trick / hack using a clever combination of flex-wrap, flex-basis, and flex-grow. It's a really powerful trick.
We'll still need media queries for stuff, but this could prove to be really, really handy!
Heydon's original article on The Holy Albatross: heydonworks.com/article/the-f...
His follow-up: heydonworks.com/article/the-f...
More info on Emmet: docs.emmet.io/
/// Timestamps
00:00 - Introduction
1:34 - basic setup
3:05 - understanding flex-wrap
4:10 - understanding flex-basis
5:57 - understanding flex-grow and shrink
7:33 - putting them all together
8:29 - negative flex-basis
9:13 - no media query required
11:08 - getting it working at a precise size
12:54 - the true power of it
16:10 - outro
#css #containerqueries
--
Come hang out with other dev's in my Discord Community
đŹ / discord
---
Keep up to date with everything I'm up to
â www.kevinpowell.co/newsletter
---
Help support my channel
đšâđ Get a course: www.kevinpowell.co/courses
đ Buy a shirt: teespring.com/stores/making-t...
đ Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my CZcams channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
Just to be clear, I think we still need media queries, but cool tricks like this can really help reduce our reliance one them :)
definately, and it also reduces the code base quite a bit in some cases..awesome trick, thanks for sharing!!
we can do these things with grids in lot sense... and more easy but sometimes something will confused us a lot in realworld projects...
A step in the right direction!
Hacks are great when they pollyfill needed behavior that isn't inherently supported. I think there are very few legitimate use cases for them beyond that.
I remember not long ago when what seemed like everyone was clamoring for media queries. Now that they are nearly universal in browser support, what happened? Have I missed something? Why are media queries now something that need to be hacked? Have they failed us? LOL I'm just trying to shed some light on when, where and why hacks are viable options and I'm in no way trying to discredit Kevin whose videos always treat me to something new and interesting.
11:16 It's unnecessary to use calc inside calc. Parenthesis are enough.
I didn't know this! Very helpful tip. Thanks :)
Good call.
makes this seem far less hacky
I was going to point that out, yea. As soon as I saw him nest the calc() functions I was like "Noooo, just use parentheses" xD
What. So many years of my life... How long has this been a thing?
8:43 Negative values are invalid on the flex-basis property. Which means the effect is the same as not specifying it.
Imho, as a beginner, these are the most useful bits of code in terms of getting beautiful, responsive layouts quickly and easily. Thanks again, Kevin. Great stuff, as always!
I never cease to be amazed at how much I learn from your videos. I think - just maybe - that I love CSS just asuch as you do!
Man my mind blowed đ€Ż
It's always good to do have different ways to get to the same result :D
Little tipp from me: You can step through your viewport size in 1px steps via clicking into one of the 2 numbers in the top toolbar and then pressing up or down on your keyboard when you have the responsive mode active (next to the "Responsive" dropdown)
With that you can precisely debug viewport changes instead of dragging the corner like you do in 12:06
My god, I need to study so much web dev.
While I appreciate a cool CSS hack as much as anyone, I would, given the choice, prefer to use CSS that clearly communicates the expectations of the implementation, such as how media queries communicate how size changes in viewports do. I like to think of it as being self documenting. Of course if there were no other options I'd go with the hack :). Another interesting demo, Kevin, and thanks for sharing. I always learn something new by watching your videos.
this comes up a lot in software engineering. one person on the team finds new functionality. another person calls it a "hack". usually the people who find new unexpected functionality create more value in the long term in my experience.
@@snoopdoggfanclub no new functionality is achieved here, it merely duplicates to some extent the functionality that media queries already provide. It's been my experience, having been a hands on engineer, team leader and manager for the last 30 years, that nothing wastes more time than duplicated effort and developers who feel the need to roll their own when time tested, viable solutions who's functionality they are looking for already exist.
@@catwhisperer911 there is new functionality being achieved here. Media queries require inputing a specific screen width for the query to take effect.
Imagine that sometimes the side bar exists and sometimes it doesn't. With a media query, you have to write different queries depending on if there is a sidebar present or not. The screen size at the point when the boxes need to stack is different depending on the presence of the sidebar. And now Imagine that sometimes there are 2 sidebars. Now you have to write yet another query.
With this, it is based on the width of the parent container so you don't have to worry about how many side bars there are. This is great for Component Libraries where you have no idea what sort of layout your Component needs to work in.
Jeff Schwartz Playing and experimenting often produces unexpected results. Results that might not have a direct application, but someone else might find one. Itâs called science.
Other than that itâs just a lot of fun doing things like this.
You didn't understand where the new cool thing is here. With media queries you act on the whole page size, but with this you act on the container width. It's super!
Awesome video! Very nice content :)
Just a tip, but you do not need to use multiple calc() Within a single calc you can use () to set the order of calculation. So calc((600px - 100%) * 999) wil work the same
The flex basis and the flex grow is a great feature, thanks for the information
So glad I came across your channel! I love how you explain the details in an easy to understand way of why things work the way they do. Thank you!
That's so clean it's going to look so much better on the awkward screen sizes than media query's I think đ€
Thank You. I always love your simplicity.
Nice to meet you, Kevin! Excellent channel and really cool stuff here! Thanks so much for talking about it.
I've used flex for few years but you opened my eyes today. Cool trick! Will use it in my work for sure.
This was AWESOME . Thank you for sharing
Fantabulous. There's always something new about flexbox, or a combination of flex features, that astonish me. Stay strong and healthy!
Thanks Kev! This is a really cool insight on usage of flexbox like media queries. Since I am pretty new to Flexbox and I am glad that I've learn some cool tricks from you.
Mind blown for sure! I think Iâll need to rewatch this too..
First you changed my thought process on writing for mobile first and now this. Thanks for your channel and please don't stop making videos!
I was trying to do this exact thing earlier this morning, nearly tearing my hair out trying to get something that does what this does. Very glad I don't have to reinvent the wheel.
that double calc operation is clever as heck!! :o I'm very impressed
You got me so excited at the beginning of the video! I thought proper container queries had been released xP I've been dreaming about them for so long now!
But I still really appreciate the deep insight you gave us, Kev! I didn't even imagine that was possible with flexbox :)
Thanks for this video. Really interesting to see some things I didnât know were possible with Flexbox. Hats off sir
As always . Amazing content . Keep it up Mr Powell !
I AM REALLY EXCITED! THIS IS SOOOOOO AWESOME! :O I need this for 2 of my current projects right now!
Dude, this absolutely blowed my mind.
Kevin, I just didn't get one thing. Shouldn't calc (500px - 100%) give a negative number if the screen is larger, therefore, making them all stack in big screens?
Depends on the size of the container, if the container size = viewport size then you're probably right
I'm wondering the exact same thing.
The container probably has a fixed width, so itâs the same size on big screens.
Yeah I'm so confused rn.
Definitely a super awesome trick solution!!!
I'm looking forward to implementing this in my current project. Great explanation. Thank you.
Mind Blown... Im definitely going to try and use this
I love that there is a div on your shirt
Love your tutorials, subscribed with pleasure, thank you!
Very nice. Great find..
Nice Haircut Kevin ! đ€ Thanks for the Videos
This is super interesting but one Iâm gonna have to watch a few times while in front of a keyboard to try it myself. Great observation and solution!
Definitely, very good explanation of this "hack", I didn't know about this concept of "container query" but, as you said, it's very exciting. Thanks.
I'm working on a bento box layout and this is a gold mine for me
This is awesome, thanks Kevin! Really enjoying your videos, thanks man.
Hi, great video. The only thing I found hard to wrap my head around is: calc( 500px - 100% ). Here 100% should reflect the width of the container. So when the container is more than 500px shouldn't this value be negative (because 100% would mean that bigger value). But both here and in the article it's said that it will be positive.
It also makes me confused
I think that both sources might be wrong. When container is smaller than the px value(in this example), basis becomes a very large nubmer, so with the shrink set to 1, it wraps all of them. On the other hand, when container is bigger than 600 px, it puts it next to each other (so the negative flex basis value is not actually working in this case. Maybe calc makes it so it does not cross the 0 value)
Even I'm confused.. Any captain here
I think he just misspoke
I think his explanation is wrong. His example with the -1 value only works at certain widths of the container (just tried it) and the negativ value is also shown as an invalid property for flex-basis.
So, what actually happens is:
If the container width is more than 500px (which would result in a negativ value for flex-basis) it defaults to 0.
When the container width is less than 500px the value gets really huge (as you said) and therefor the inner elements are wrapped.
Which makes total sense if you think of it: Set the ideal size/width to a very huge value it tries to achive this, but to get close it has the wrap the elements to make them as big as possible.
Still a great video and trick! :)
Man.. All through 8:00 and 8:20, I sat there thinking, "Kevin, you're the best at explaining this stuff!"
Okay, back to video XD
Great information
Good work Kevin! Thank you
Great Stuff Kevin! Will try it in this week.
More tricks bro, love your style of picking cool and newest features
This was a really cool video, and I look forward to implementing this in my current project.
Super nice! Thanks for reaching this and sharing đđ
Nice. Can't wait to put that into use.
I just finished your Conquering Responsive Layouts course, and I had a lot of trouble with the final challenge, specifically getting the footer section to layout properly. My solution used flex grow, shrink and basis, so when I saw what this video was about, my mind immediately went to those flex properties. I think that the Calc hack is a stroke of genius! As for why this would be useful, I needed a layout that specifically paid attention to the container size, which is not something that media queries can do. Obviously they are still useful for plenty of things, but this additional little tool is pretty useful in the right situation đ
Right away it's easy to see how this technique can offer simpler code for complex layouts. THANK YOU for sharing. The calc within a calc made my head explode đ
It's actually really a cool concept to explore
It IS really cool! Thanks Kevin!
In terms of semantics, more people will be used to the media query stuff rather than calc on flex basis.
Worth bearing that in mind when designing your css too
That was so much fun to watch đ
It's a great and thorough explanation of how to use the flex display. It's true that it's an option to use this for alternative in media queries. But I think, it's still better to use media queries specially on a team project since there will be other people who will be using your code and some tasks requires on specific views (mobile or tablet).
But thanks again for explaining the flex. It helps a lot in development in the future. đ
Awesome tip!
Great video Kevin!
This has saved my life, thank you
Just finished a massive webshop where I could have used this so well, so interesting !
This is getting used in my WIP. Wild.
Ohhhh, interesting. This hack booms my head đ
You Growing my CSS knowledge, Thank you always..
Nice! Thanks for this Kevin, this im going to start implementing into my code!
I like this a lot!! It can be especially useful for composable content modules. The only downside is the clarity of intent to other developers on your team have to maintain this code. You'd need to throw in some comments to clarify what's happening for sure. đ
This is fricking awesome!
Nice one Keven
To steal from Sherlock.... This is going to take me at least three beers to figure out. An amazing idea and video. Thanks
big thanks for sharing, it is very useful
Thanks Kevin. I first came across his work last year on every-layout.dev . Very interesting approach, and thank you for the demonstration. Imagine if Bootstrap worked off of these container queries...
This is a perfect solution to the problem. But I need to practice it to master so that it doesn't make an irritating bug.
Ayy! Great explanation, Kevin. More of this kind of stuff in every-layout.dev, if anyone wants a deep dive.
Dude the Intro Was awesome
what a coincidence, i actually spent the last 2 days for dozens of experiments to work around a problem based on 3 columns with a 100vh portrait image in the mid, and a quote on the right column - exact the 2:22 problem + the image didnt fit in the center, many solutions with pro and cons of course (caused mainly by weird flex 5:46 as you pointed out), well didnt find a golden mid.
well, google saw my search queries and then when i entered accidentaly on YT, your video showed up in the Recommended panel, and honestly, im thankful, 1. Google suggested this video, 2. Kevin, you did a great job! very nice explained! :D
Freaking amazing!! I love flexbox, but now OMG!! I can't wait to put it practice. I'm building the next version of a site of mine...there is going to be helpful! Thanks million!!!
That is pretty freaking. Just like of old when I started tinkering with media queries for the first time. :D
Best trick I have ever seen!
Awesome, glad that you enoyed it!
It's really cool...but everything but new. And like you wrote: it will not replace media queries (because those babies are used for other things than flexies) but using it makes things really easier and more FLEXible đ
I love your videos!!!! Thank you
Fantastic !
wow kevin you're amazing !
This is F**** Amazing, thank you Kevin for saving my life
Each and every single video comes with a logic that I didn't knowđđ.
Good man too clean
Kevin, this is a really interesting use of Flex. Basically using these container queries you somehow manage to add a second dimension.
But - wouldn't that be an easier task using CSS grid?
Only one correct question in the whole comments!
Thank you for this! I am just starting out with Web Design, and this is very helpful!
Glad you enjoyed it and welcome aboard!
Amazing video đ
So great!!! What an amazing discovery. Can't wait to get on computer to play with.
Did you end up making some other example layouts, I'm interesting in seeing more of these. Wondering what hacks you would use if you wanted to change things at two different widths rather then just the one.
Regards and I've been passing the video on. Thank you
Awesome one. Never knew decimals in flex-grow and negatives in flex-basis work. Although I anticipated that they will stack for negative value and the value has to be positive according to specs. But I really like this. Will like to give try to negative values on possible css property candidates.
Wow that was miraculous.
Thanks for sharing this! It will definitely be useful âšïž
I don't think is a Flexbox hacky stuff. It is more to use the tools we have, the best way we can. It is not like the old floats or other hacks that became like needed in a dayly basis. Thanks to you, I,m going to use it a lot (like pseudo elements) because it is beautiful how those divs grow and shrink. Again Thank you Kevin.
very useful thanks
Thank you sirâ€
Wow.Kevin ..this is incredible )
very nice indeed
that's a pretty cool hack.
You can achieve something similar by giving a % value to your flex-basis and a px value to min-width.
Just Awesome!!!!
Thats insane! Nice :D
Man that is so cool