flex wrap behind the hood
Hey, so i created a post a while ago asking how flex wrap calculated when to wrap items. I was told that items wrap based off of their ideal size (flex-basis or width. If none set then intrinsic size) and that the items wrap when their final size (content size + width given by flex grow) = content size.
I recently saw on an article that they begin to wrap when the flex items sum total flex basis is larger than the container width.
I'm a little confused now on how this functions. I'd appreciate if anyone could help me clear this up. Thanks in advance
3 Replies
Kevin Powell
YouTube
Flexbox is more complicated than you thought
🎓 - I have a 4+ hour course that focuses only on understanding and using Flexbox: https://flexboxsimplified.com
Article on CSS-Tricks: https://css-tricks.com/equal-columns-with-flexbox-its-more-complicated-than-you-might-think/
Flex is a little strange in how it works, and I only recently dove deep enough into it to really understand what was ...
i think this is the right video, he shows you with firefox dev tools how things are calculated. i dont remember if flex-wrap is gone over explicitly but the info is good to know either way.
I believe I’ve taken a look at that before and I don’t believe flex-wrap is in there no. But can’t hurt to refresh on that info, thank you