How to take control of Flexbox

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:25 - What we are starting with
01:18 - Understanding what happens when we use display flex
05:00 - What flex-shrink does
07:40 - Adding in flex-grow
10:19 - Making things more consistent by defining the size

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

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 YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[Wakedaddy]

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!

[jacopo]

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

[kerrykreiter]

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!

[KeithTharp]

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

[magoxxii]

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

[pedromenezes]

thanks! you're always helping demystify tricky behavior!

[jfftck]

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.

[satadhi]

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

[dongbinkim]

Feel like finally getting to Flexbox. Thank you!

[ilyesPR]

So much pain healed thanks to this guy

[yatskanych_oleksandr]

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

[rrenildopereiraa]

amazing stuff! this will help my projects a lot!

[sonuaryan]

Before this video i was controlled by flexbox. Now I'm controlling flex box

[vladpopescu]

Hello Kevin, your link for flexbox simplified has left the analytics parameters out. Thank you for the consistently good content!

[CHANDRASHEKAR-oxqt]

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

[Efibe]

Thank you for your video! Love it.. as a begginer its very helpful

[simon-off]

I'm gonna try to use flex some more when it's suitable. Grid is just so good though 😅

Great video! Thanks Kevin

[mendosis]

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

[reneeschke]

Pleeease a Video explicitly exploring flex basis in column direction. Shrink and grow in column works conceptually so much different as you always (usually...) have room to scroll and therefore no limiting height

[ekchills]

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