Container queries are possible!
Рет қаралды 157,426
Күн бұрын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 KZfaq 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!
@KevinPowell 3 жыл бұрын
Just to be clear, I think we still need media queries, but cool tricks like this can really help reduce our reliance one them :)
@MrAndi1281 3 жыл бұрын
definately, and it also reduces the code base quite a bit in some cases..awesome trick, thanks for sharing!!
@kashyappatel1672 3 жыл бұрын
we can do these things with grids in lot sense... and more easy but sometimes something will confused us a lot in realworld projects...
@bcgibson22 3 жыл бұрын
A step in the right direction!
@catwhisperer911 3 жыл бұрын
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.
@catwhisperer911 3 жыл бұрын
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.
@devspot82 6 күн бұрын
It took me three years to get into this video?! Wow.. Thank you, Kevin! Your enthusiasm is awesome!
@hrgwea 3 жыл бұрын
11:16 It's unnecessary to use calc inside calc. Parenthesis are enough.
@MrQuickLine 3 жыл бұрын
I didn't know this! Very helpful tip. Thanks :)
@elephant_888 3 жыл бұрын
Good call.
@rossgeography 3 жыл бұрын
makes this seem far less hacky
@calyodelphi124 3 жыл бұрын
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
@rihokroll8509 3 жыл бұрын
What. So many years of my life... How long has this been a thing?
@JaronWanderley 3 жыл бұрын
Man my mind blowed 🤯
@KevinPfeifer 3 жыл бұрын
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
@hrgwea 3 жыл бұрын
8:43 Negative values are invalid on the flex-basis property. Which means the effect is the same as not specifying it.
@vasylbats2544 3 жыл бұрын
I've used flex for few years but you opened my eyes today. Cool trick! Will use it in my work for sure.
@moranmono 3 жыл бұрын
The flex basis and the flex grow is a great feature, thanks for the information
@victorpinasarnault9135 3 жыл бұрын
My god, I need to study so much web dev.
@SoulJiuJitsu 2 жыл бұрын
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!
@Flyers8810 3 жыл бұрын
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!
@crowebro9581 2 жыл бұрын
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!
@jsnelson_ 3 жыл бұрын
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!
@erichobbs4042 3 жыл бұрын
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 😃
@mrshawnspencer 3 жыл бұрын
Fantabulous. There's always something new about flexbox, or a combination of flex features, that astonish me. Stay strong and healthy!
@RicardoVargas03 3 жыл бұрын
Nice to meet you, Kevin! Excellent channel and really cool stuff here! Thanks so much for talking about it.
@thaysdosSantosneves 3 жыл бұрын
Dude, this absolutely blowed my mind.
@bjesuiter 3 жыл бұрын
I AM REALLY EXCITED! THIS IS SOOOOOO AWESOME! :O I need this for 2 of my current projects right now!
@petervandylian2486 3 жыл бұрын
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.
@cloudstudy3323 3 жыл бұрын
Thank You. I always love your simplicity.
@kamparsen 3 жыл бұрын
This was AWESOME . Thank you for sharing
@A_Lesser_Man 3 жыл бұрын
that double calc operation is clever as heck!! :o I'm very impressed
@clevermissfox 8 ай бұрын
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!
@catwhisperer911 3 жыл бұрын
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.
@snoopdoggfanclub 3 жыл бұрын
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.
@catwhisperer911 3 жыл бұрын
@@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.
@dannyt503 3 жыл бұрын
@@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.
@renedekat3519 3 жыл бұрын
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.
@FredoCorleone 2 жыл бұрын
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!
@RodrigoDAgostino 3 жыл бұрын
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 :)
@gwemula 3 жыл бұрын
Mind blown for sure! I think I’ll need to rewatch this too..
@renedekat3519 3 жыл бұрын
Thanks for this video. Really interesting to see some things I didn’t know were possible with Flexbox. Hats off sir
@125delgado 3 жыл бұрын
Very nice. Great find..
@TNTX2010 2 жыл бұрын
Nice. Can't wait to put that into use.
@RubenGarcia-mr7pe 3 жыл бұрын
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.
@NOALNOM Жыл бұрын
Definitely a super awesome trick solution!!!
@yashpandey9550 3 жыл бұрын
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.
@mateuszgroth7480 3 жыл бұрын
It also makes me confused
@mateuszgroth7480 3 жыл бұрын
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)
@mthaha2735 3 жыл бұрын
Even I'm confused.. Any captain here
@JamesWelbes 3 жыл бұрын
I think he just misspoke
@philf4018 3 жыл бұрын
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! :)
@mihailodukic601 3 жыл бұрын
As always . Amazing content . Keep it up Mr Powell !
@isholapinheiro 3 жыл бұрын
It's actually really a cool concept to explore
@samkeen 3 жыл бұрын
This is awesome, thanks Kevin! Really enjoying your videos, thanks man.
@leepaulison4928 3 жыл бұрын
I'm looking forward to implementing this in my current project. Great explanation. Thank you.
@beinyourguard 3 жыл бұрын
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?
@jackd6373 3 жыл бұрын
Depends on the size of the container, if the container size = viewport size then you're probably right
@stephaniepeters1354 3 жыл бұрын
I'm wondering the exact same thing.
@s9saiyajin 3 жыл бұрын
The container probably has a fixed width, so it‘s the same size on big screens.
@davisnoah347 2 жыл бұрын
Yeah I'm so confused rn.
@PG1131 3 жыл бұрын
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 😂
@MaakBow 3 жыл бұрын
Mind Blown... Im definitely going to try and use this
@MartinLangenberg 3 жыл бұрын
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
@JamesKing-jc8uy 3 жыл бұрын
Love your tutorials, subscribed with pleasure, thank you!
@whistlerbrad 3 жыл бұрын
That was so much fun to watch 👏
@ShiyazudeenA 3 жыл бұрын
Awesome tip!
@TheWokkels 3 жыл бұрын
Just finished a massive webshop where I could have used this so well, so interesting !
@robertzeurunkl8401 3 жыл бұрын
This was a really cool video, and I look forward to implementing this in my current project.
@3vonline 3 жыл бұрын
Great information Good work Kevin! Thank you
@i_m3 3 жыл бұрын
More tricks bro, love your style of picking cool and newest features
@codingkitty8218 3 жыл бұрын
Dude the Intro Was awesome
@middle-ground 3 жыл бұрын
This has saved my life, thank you
@devednyavyas7800 3 жыл бұрын
Great Stuff Kevin! Will try it in this week.
@lubomirpamukov1867 Жыл бұрын
That's so clean it's going to look so much better on the awkward screen sizes than media query's I think 🤔
@eckhartpedersen3972 2 жыл бұрын
This is fricking awesome!
@joeldcanfield_spinhead 3 жыл бұрын
This is getting used in my WIP. Wild.
@incorporealnuance 2 жыл бұрын
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.
@edisonfernandez3397 3 жыл бұрын
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. 🎉
@keviincosmos 3 жыл бұрын
Super nice! Thanks for reaching this and sharing 👏👏
@devoinregress 3 жыл бұрын
I love that there is a div on your shirt
@lLuckyDomel 3 жыл бұрын
Nice Haircut Kevin ! 🤙 Thanks for the Videos
@denyscole2767 3 жыл бұрын
Nice one Keven
@kshook 3 жыл бұрын
Great video Kevin!
@liszcgsedt 3 жыл бұрын
That is pretty freaking. Just like of old when I started tinkering with media queries for the first time. :D
@user-yl1dp2hw9n 3 жыл бұрын
Best trick I have ever seen!
@KevinPowell 3 жыл бұрын
Awesome, glad that you enoyed it!
@RICB3AU 3 жыл бұрын
Nice! Thanks for this Kevin, this im going to start implementing into my code!
@sashatv138 3 жыл бұрын
It IS really cool! Thanks Kevin!
@castlemoyle 3 жыл бұрын
To steal from Sherlock.... This is going to take me at least three beers to figure out. An amazing idea and video. Thanks
@michaelhofby 3 жыл бұрын
Thats insane! Nice :D
@cypreanadie7424 3 жыл бұрын
You Growing my CSS knowledge, Thank you always..
@braswelljr 3 жыл бұрын
Good man too clean
@heydonworks 3 жыл бұрын
Ayy! Great explanation, Kevin. More of this kind of stuff in every-layout.dev, if anyone wants a deep dive.
@codehal Жыл бұрын
Thank you sir❤
@hitesh2543 3 жыл бұрын
Each and every single video comes with a logic that I didn't know😂👍.
@vintprox 2 жыл бұрын
Ohhhh, interesting. This hack booms my head 😄
@indieNik 3 жыл бұрын
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
@StefanoKocka 3 жыл бұрын
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
@jacobs492 4 ай бұрын
I'm working on a bento box layout and this is a gold mine for me
@BloodyClash 3 жыл бұрын
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 😁
@cedwards1080 3 жыл бұрын
I love your videos!!!! Thank you
@barneylyo 3 жыл бұрын
This is F**** Amazing, thank you Kevin for saving my life
@firasnizam 3 жыл бұрын
big thanks for sharing, it is very useful
@revillsimon 3 жыл бұрын
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...
@elephant_888 3 жыл бұрын
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. 😅
@luiscolome75 3 жыл бұрын
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!!!
@mekaclaude 3 жыл бұрын
Fantastic !
@heymate8627 3 жыл бұрын
You can achieve something similar by giving a % value to your flex-basis and a px value to min-width.
@Talhacee 3 жыл бұрын
Damn 😳🤯 amazing one
@thesecondsage 3 жыл бұрын
Man that is so cool
@ErnestV 3 жыл бұрын
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?
@ShyshkovOleg 3 жыл бұрын
Only one correct question in the whole comments!
@bryanarycode3417 3 жыл бұрын
Thank you for this! I am just starting out with Web Design, and this is very helpful!
@KevinPowell 3 жыл бұрын
Glad you enjoyed it and welcome aboard!
@alirezaafshar6528 3 жыл бұрын
wow kevin you're amazing !
@hardikluhar4738 3 жыл бұрын
Amazing video 😍
@technikhil314 3 жыл бұрын
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.
@ritaravinsky8262 3 жыл бұрын
cool stuff! thanks A LOT
@nikoladd 3 жыл бұрын
that's a pretty cool hack.
@JacksBracket 3 жыл бұрын
Theres keeping up with new css trends, then theres Kevin. ✌
@offroaders123 3 жыл бұрын
Thanks for sharing this! It will definitely be useful ⌨️
@fraidoonhu9284 3 жыл бұрын
Wow that was miraculous.
@YinonOved 3 жыл бұрын
love the annotated captions 😂
@andymiles5156 3 жыл бұрын
That’s Kevin useful to know. I wanted the wider element to be at the top so the most recent article was bigger. I ended up reversing the flex order which put the largest element at the top, but it was for the oldest article, so then I just rendered the articles in reverse.
@vip1all 3 жыл бұрын
You could just say :first-child ( flex-basis: 100; flex-shrink: 0 } and you're home, without the whole hack :) I hope it helps :P
@andymiles5156 3 жыл бұрын
Thanks for the tip. What I’ve got at the moment is more involved than the simple description I gave earlier. Sometimes there is one, two, three or four cards (article teasers) at the top. This can also vary by screen size (bootstrap and media queries) and the teaser image used can very between 16x9 and a 1x1 image depending on the screen width and number of teasers on a row. I’d post a link to demonstrate more clearly but it’s a corporate Intranet site.
@rahulc0dy 3 жыл бұрын
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.
@ColinPittendrigh 3 жыл бұрын
Good stuff
Action C Mini
Рет қаралды 102 МЛН