How to take control of Flexbox

If you really want to take control of Flexbox, check out my course Flexbox Simplified 👉 flexboxsimplified.com?
🔗 Links
✅ The original design on Dribbble: dribbble.com/shots/23583273-H...
✅ My code from this video: codepen.io/kevinpowell/pen/yL...
✅ Flexbox Simplified: flexboxsimplified.com?
⌚ 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
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
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 KZbin channel, make sure to follow me on Instagram and Twitter.
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!

[@Wakedaddy87]

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!

[@Allformyequine]

I noticed that too, that's a great easy concept to keep in mind! Super!

[@KeithTharp]

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

[@kerrykreiter445]

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!

[@lukedorny]

Great overview. Thanks, Kevin.

[@pedromenezes4013]

thanks! you're always helping demystify tricky behavior!

[@magoxxii]

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

[@StephenRayner]

Same, finally digging deep into CSS as sick of being crap at it. 15 years experience, AWS, python, typescript, C#, React, React Native blah blah… But CSS every time I am just fighting it. Need to really learn more beyond box model, cascading, inheritance.

[@CHANDRASHEKAR-ox4qt]

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

[@dongbinkim3773]

Feel like finally getting to Flexbox. Thank you!

[@rrenildopereiraa]

amazing stuff! this will help my projects a lot!

[@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.

[@yatskanych_oleksandr]

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

[@vladpopescu2004]

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

[@satadhi]

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

[@jan.kowalski]

Excellent explanation. Thanks!

[@einatblackrose]

That's very helpful. Thank you

[@jagonza2000]

love it! 👏

[@jesisadhikari]

Really saved my time dude, thanks!

[@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

[@Lucifer-vz4hg]

man is saving us

[@pinnaclewd]

Im sticking with grid.....its all I need.

[@Julie-gh5ir]

Is there the same kind of video, but with grids ? I avoid learning it for so long.... Kevin seems to be the good teacher for me.

[@ErikBlomqvistSwe]

@@Julie-gh5ir not the same kind, since there's so much more to cover with grid, but just go to his channel and search for "grid" and you'll find tons of helpful material!

[@RickBeacham]

You may need to learn Flex-box especially when many websites are using it instead of the wonderful GRID... :)

[@Julie-gh5ir]

I already know flexbox.@@RickBeacham

[@StephenRayner]

I can’t recall why but there are some situations where flex is more suitable than grid.

[@OCEMTechZone]

Great Sir 🎉

[@yogibarista2818]

I tend to use flex-basis: to control the "fixed-size" elements

[@moritzdeiaco2798]

The og border lime hack! Nice video

[@ofadiman]

Flexbox is taking control of my life 😳

[@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

[@atwarwithlife]

you're the css goat.

[@tutestheking7838]

most of the time I use grid just because it just does what i want, but using flex-shrink/grow/basis seems like a good option in some cases. Thanks for the content Kevin

[@chrisstucker1813]

Both are very useful. It made more sense to me the moment I realised flex sizes are determined by the children content whereas grid is more about the parent. That’s why grid feels more comfortable, because you’re not worrying so much about the children content. In grid, the children abide the parent; in flex, the children control the parent!

[@ToyotaCharlie]

this episode was very Canadian with all the "outs" ❤️🇨🇦😉

[@amanuelelhanan4716]

This statement opened my eyes Kevin, 4:20

[@abhim6380]

Bought the course. Any plans to make grid simplified?

[@GerritforBazeja]

this is nice to know. Tnx

[@tomiekk6255]

This is super interesting! Personally from what you showed I think I would use Flexbox over grid in such situation, are there any pros of using grid in this particular example?

[@sjd_style]

Amazing tnx

[@m12652]

Thanks... again 👍 Anyone else notice Chrome is not handling anchor positioning/popovers properly since a couple of updates back? Mine are always opening top left regardless of where the element they are anchored to is.

[@percurious]

Talking about flex laxouts - just stumbled upon a problem where someone was a bit to loose with things - can you think of any usecase where you would want a flex-direction: column; combined with a flex-wrap: wrap; ? 🤔

[@MartinDoudoroffLLC]

Thanks!

[@KevinPowell]

Thanks so much!

[@haidubogdan8712]

recently I needed to solve styling for columns with stacked blocks. The solution was not grid, and not display flex but column-count : nr. I'm interested if you can make a video about column-count, column-span .... css

[@JoelGallant236]

Why not space-between?

[@quark2012]

How many times I fight with this problem :) Thanks

[@rayyanabdulwajid7681]

Guys, just remember how to use display flex, justify content center, align items center, flex wrap: wrap, flex shrink, justify content space between, flex 1 ,etc

[@GauravKumar-qe7iu]

did display: grid; and grid-template-columns: auto 1fr auto; works same in this case?

[@vilijanac]

It would be nice if would resize and flex different images to a max-with.

[@djamaatul]

im using flex-1 instead flex-grow-1, when use case use flex-1 vs flex-grow ?

[@proteus1]

Grid and Flex both have their advantages.If I was programming Grid, would make a rule for cloning rows. Grid row-d to copy parent. D for duplication of parent. No brainer to me. Why make life complicated.

[@MrJettann]

If I need consistent layout, usually I'm using grid

[@KevinPowell]

yeah, grid is probably an easier choice here, and where I'd have gone first, which I sort of alluded to druing the video, but sometimes it's nice to know how to wrangle flexbox a little.

[@Julie-gh5ir]

What are the differences between flex-basis and width ? I always use width... But perhaps it is not the better solution ?

[@ClarkSell]

THAT HOODIE!!!

[@JimKernix]

at 3:15 you clicked and dragged each image in the article.hotle-listing and a faded out version of the photos was visible until you released your mouse. What is that? How does the browser enable that? I know it's not related to your video but that is an interesting behavior...

[@RohitKumar-xs3wh]

nice

[@sumitsinha995]

He Kevin there must be starter code .Like there is full code availble.

[@toptravelingoffers7666]

Why don't you add your videos in playlist. example this video. It also becomes very difficult to find specific videos within many videos so having a playlist or play store serial would be very helpful. I just started web dev[CSS] and I love your videos so I have a request for you to make a complete serial playlist for beginners. Your videos are amazing and the playlists are beautiful but I don't know which playlist to start with,, so please make a videos to guide beginners step by step serial playlists🙏

[@KevinPowell]

Once you get past the very basics, which I have a playlist on, it can be hard to organize things after that because it often comes down to what you're trying to accomplish, but I'll see what I can do 😊

[@srinathsagar4736]

make a video on GRID

[@Techgether]

when is the appropriate situation when we use width vs flex basis? i still cant grasp the concept of flex basis :/ do u have a video on this?

[@brickslabel]

Flex-basis is only an option if the item is a flex-child, and is best when the children are of varying sizes and are ok with their widths being more fluid. Width is when you need a fixed size/are not flexible and not in a Flexbox layout; it's more precise.

[@Techgether]

@MrTicketeer understand the purpose of flex basis, but unclear how to use it..

[@brickslabel]

@@Techgether that's the point I was trying to get across though; it depends on your needs. If you have children of varying sizes and want to set a min-width they should all be without saying "MINIMUM" width and making them be that width, you can offer a "basis" which is flexible: be that width if you can, but shrink if needbe. You apply it to the children. Maybe I'm missing what you are asking when you say "how" to use it? Your original comment asked "when"; what do you mean by "how"?

[@Techgether]

@MrTicketeer yes I understand the purpose of flex basis better now. How to use it is my 2nd question and I meant like I don't understand the syntax or what unit to use under flex basis

[@LokiDaFerret]

This video is a good example why you don't use flex. Grid is the right tool for the job. At least in this layout. However you missed a great opportunity to explain flex shrink and grow better. Because they are a ratio. If they are all set to one then your ratio is 1:1. If one of them is set to 2 then your ratio is 2:1 etc. In other words the speed at which something grows and shrinks relative to its siblings can be controlled. A missed opportunity 😂

[@RickBeacham]

Why did you stop using Firefox? :(

[@safariknight3239]

I swear I only understand this because of Kevin

[@AlThePal78]

almost want to use tables lol

[@OghamTheBold]

Lack of understanding hints at hidden algorithm

[@gE0013]

With the introduction of "grid", I think "flex" is going to be used way less. Basically, if you have a pile of elements, you are probably going to use "grid" because you want to keep things aligned.

[@DeadShotFPS]

Not at all. As Kevin says in this video and many others, Flexbox is most useful in cases where you want each item’s size to be determined by its content.

[@gE0013]

@@DeadShotFPS I don't get your point: since is very common that piled elements have different content, if you use flex it would be harder to make them aligned. And the reason is exactly what you said.

[@SmileyJack.]

10:14 E O_O -> --_--

[@planesrift]

Just do everything on canvas /s

[@DeepakKumar-ob6ps]

Same price without breakfast? 😂

[@NoToBusinessCasual]

I hate Flexbox. Completely unreliable and undependable. Rubbish concept.

[@user-ouss]

Please don't speak fast

[@BeautifulTurkish]

You can use 0.75 speed

[@user-ze7nw9ud7m]

I don't use flexbox, because it feels like an old man trying to learn teenager's slang. Disgusting. Why it's not "grid" or something?

[@Pareshbpatel]

Nice one, Kevin. thanks. {2024-04-23}