How to take control of Flexbox

[@ryan.wakefield]

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!

[@chrisstromberg6527]

This is really key to understanding the fundamentals of flexbox and what it is trying to do. Definitely helps me to better understand this.

[@yenngocphan766]

This is my favorite flexbox video, because it uses a real life scenario. Keep up the good work.

[@jacopo710]

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

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

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

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

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

[@yatskanych_oleksandr]

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

[@نورالدينعمادتوفيق]

the thing I always say is Flex is all about justice. it gives each item as much width as it needs ( that's the default behavior we change with grow, shrink, and basis). when we set an item with a fixed basis and flex-shrink of a 1, as soon as that item starts shrinking from its basis then every other item shall start shrinking at the same rate ( that's why we can set different shrink ratings). again the same thing applies to flex-grow, if two items are allowed to grow then as soon one item starts growing, the other also starts also growing. in this way flex achieves "justice" by making all items grow and shrink at the same time and rate as soon as one item starts growing or shrinking from its original basis.

[@m.smanoj4688]

Anyone who is starting to learn web development, especially CSS, and responsive page design should learn CSS BASICS properly-master the basics. You should be able to visualize a design in your mind, even if someone asks you about it in a dream. And finally, try to watch almost all of Kevin Powell's videos without missing any. You will definitely never regret watching them. EAST OR WEST, KEVIN POWELL IS THE BEST!

[@chrisstromberg6527]

A lot of us are coming here after learning the basics. The basics unfortunately don't explain the nuances of Flexbox and why it behaves as it does.

[@m.smanoj4688]

@@chrisstromberg6527 as absolutely flexbox works inside out type contents of flexbox has effects on outside like told by Kevin

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

[@satadhi]

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

[@MartinDoudoroffLLC]

Thanks!

[@KevinPowell]

Thanks so much!

[@LukeDorny]

Great overview. Thanks, Kevin.

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

[@ilyesPR]

So much pain healed thanks to this guy

[@dongbinkim3773]

Feel like finally getting to Flexbox. Thank you!

[@yogibarista2818]

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

[@vladpopescu2004]

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

[@shekar_webdev]

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

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

[@pedromenezes4013]

thanks! you're always helping demystify tricky behavior!

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

[@Efibe8]

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

[@amanuelelhanan4716]

This statement opened my eyes Kevin, 4:20

[@KeithTharp]

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

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

[@somrigostsaas]

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

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

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

[@0xbinarylol]

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

[@ekchills6948]

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

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

[@atwarwithlife]

you're the css goat.

[@rrenildopereiraa]

amazing stuff! this will help my projects a lot!

[@jesisadhikari]

Really saved my time dude, thanks!

[@Julie-gh5ir]

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

[@scott-richardson]

I have always just assigned a percentage width on each of the flex items and then they shrink and grow nicely.

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

[@Techgether]

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

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

[@ofadiman]

Flexbox is taking control of my life 😳

[@JoelGallant236]

Why not space-between?

[@jagonza2000]

love it! 👏

[@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; ? 🤔

[@abhim6380]

Bought the course. Any plans to make grid simplified?

[@GauravKumar-qe7iu]

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

[@jan.kowalski]

Excellent explanation. Thanks!

[@Lucifer-vz4hg]

man is saving us

[@ToyotaCharlie]

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

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

[@OCEMTechZone]

Great Sir 🎉

[@quark2012]

How many times I fight with this problem :) Thanks

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

[@einatblackrose]

That's very helpful. Thank you

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

[@svnbeats6700]

To be honest i use both 😂

[@moritzdeiaco2798]

The og border lime hack! Nice video

[@AtiqurRahman-gj6mg]

This is really helpful

[@tayfun6378]

we are here to learn and all we see is your directions to your other videos and your course.

[@RickBeacham]

Why did you stop using Firefox? :(

[@xyster7]

the main issue with flexbox is working with someone else code not understanding idea of layout, it is just mental struggle when it comes to a simple things to make them easy reusable. It takes time and often it is not really worth.

[@sumitsinha995]

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

[@Fad-kun]

Thanks

[@sargaa8471]

what's happening with the webcam ?

[@azizbaouchi]

Which browser do you work on ?

[@ClarkSell]

THAT HOODIE!!!

[@vardhankulkarni6143]

GODDDDDDD !!!!!

[@GerritforBazeja]

this is nice to know. Tnx

[@sjd_style]

Amazing tnx

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

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

[@safariknight3239]

I swear I only understand this because of Kevin

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

[@srinathsagar4736]

make a video on GRID

[@RohitKumar-xs3wh]

nice

[@OghamTheBold]

Lack of understanding hints at hidden algorithm

[@AlThePal78]

almost want to use tables lol

[@SmileyJack.]

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

[@AJCastello]

Let's go back to tables, seriously.

[@planesrift]

Just do everything on canvas /s

[@DeepakKumar-ob6ps]

Same price without breakfast? 😂

[@NoToBusinessCasual]

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

[@chezchezchezchez]

Tell us what you love then.

[@douglasjamesmartin]

It's just garbage, unbelievable you guys have to work with this stuff

[@udayabhaskar]

Lot of bs in this video tbh, unlike other good ones in this channel.

[@user-ouss]

Please don't speak fast

[@BeautifulTurkish]

You can use 0.75 speed

[@ТестТестович-г2о]

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?

[@amanrohilla4435]

Why are you using these thumbnails so frequently 👎

[@Team-hf7iu]

You, ungrateful person. Why focusing on that? Can't you see he is doing his best to help us. And his thumbnails are very good and captivating according to me and to most people if not he won't have the number of views and good feedback he has. Stop that

[@Pareshbpatel]

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