how to make flex items stack on each others when the width of items is below a certain width
Hi guys, I have watched this video https://www.youtube.com/watch?v=fuiEYR6Hoe0 and I try to make flex items stack on each others when the width below 500px but it does not work. Does anyone know where I'm wrong?
Kevin Powell
YouTube
Container queries are possible!
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...
4 Replies
In what way does it "not work"?
You should share your CodePen as that would help others to understand your issue and also be able to play around with the code to help you resolve the issue.
In your screenshot I see a single div.box is 492px. but it will look at the total width (100%) of the section. when that is < 500px, it will break
sorry. Because in my country I can not login into codepen so I did not share my code. But here it's https://jsfiddle.net/adqeyprs/
yeah. You're right. https://www.youtube.com/watch?v=OtqZKLdDNXY&t=1239s I see in this video at 11:00 Kevin can make the flex item take the entire width of the parent element when its width reach certain width. Can I do it in my case?
Kevin Powell
YouTube
Unfamiliar CSS patterns that improve on the classics
Common patterns that get the job done are handy because if we come across it in a codebase, we know exactly what’s going on… but sometimes, familiarity holds us back. I get pushback when I use new methods to solve things we already have solutions to, but I don’t do it just for the sake of it, I do it because I feel like the new ways are better. ...