How to take control of Flexbox

One thing you said here I had never thought about was the fact that flexbox is controlled inside-->out, but grid is controlled outside-->in. That makes a lot of sense and actually clarifies a lot more of this. Thanks for all of the amazing videos!

Excellent explanation! Flexbox is inside -> out, grid is outside -> in!

So much pain healed thanks to this guy

I think the issue with people understanding flexbox is due to them not working with HTML tables, because, if they had, they’d see how both use a similar — if not the same — resizing behavior. Every time I use flexbox, I think of them as defaulting to being like a table row — where it can only have one row — and, just like tables, you have to define the behavior you want. This proves that the algorithm for tables were a good solution for layout, but breaking it up into two layout properties (flexbox and grid) gave us much more control over that algorithm. This is what CSS is about, I think all the interactive parts of CSS could be turned into a new language and that might make that simpler. It’s as though things like animations, transitions, and transforms are all complex due to having to fit into the CSS design specifications. I understand these very well, but find the syntax is the most complex part of it, since CSS was designed for layout and styling.

Thank you Kevin! “Content is king in flexbox” is going to stick with me. This video really helped me get a much better understanding of flex shrink and grow and how they can be used in many layouts. Thank you for developing and sharing such useful content!

Before this video i was controlled by flexbox. Now I'm controlling flex box:face-blue-smiling:

Great overview. Thanks, Kevin.

Excellent!! I've been avoiding flexbox for so long, this helps a ton

thanks! you're always helping demystify tricky behavior!

Every time I have an issue to solve, you upload a video related! its so great! thanks for such amazing content always!

That's why i prefer to use grid instead of flex. Thanks for useful content as usually

Feel like finally getting to Flexbox. Thank you!

amazing stuff! this will help my projects a lot!

love it! 👏

Sir, i would like to confess that you are simply the best.

Excellent explanation. Thanks!

taking advantage of flex grow and shrink really made my layots mch better

felt like reading css manual while watching the video thanking you sir!🙏🙏

Really saved my time dude, thanks!

i wouldn't bother guessing or forcing the size of the middle part you should align images to avoid inconsistencies (which in my opinion is the best place to set flex-shrink to 0) and send metaboxes to the right-hand side (either with automargin or with flex-grow in the middle). then you can let the latter two play or fix the size of the metabox if your design is grid based