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!
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!
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.
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
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!
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.
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
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!
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?
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
@@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!
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.
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
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...
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
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; ? 🤔
@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
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.
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.
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.
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 😂
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🙏
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 😊
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.
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.
@@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.
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
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!
I noticed that too, that's a great easy concept to keep in mind! Super!
This is really key to understanding the fundamentals of flexbox and what it is trying to do. Definitely helps me to better understand this.
This is my favorite flexbox video, because it uses a real life scenario. Keep up the good work.
Excellent explanation! Flexbox is inside -> out, grid is outside -> in!
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!
That's why i prefer to use grid instead of flex. Thanks for useful content as usually
Every time I have an issue to solve, you upload a video related! its so great! thanks for such amazing content always!
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.
Great overview. Thanks, Kevin.
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
Sir, i would like to confess that you are simply the best.
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!
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.
@@chrisstromberg6527 as absolutely flexbox works inside out type contents of flexbox has effects on outside like told by Kevin
So much pain healed thanks to this guy
Feel like finally getting to Flexbox. Thank you!
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.
felt like reading css manual while watching the video thanking you sir!🙏🙏
This statement opened my eyes Kevin, 4:20
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
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!
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?
Hello Kevin, your link for flexbox simplified has left the analytics parameters out. Thank you for the consistently good content!
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
Excellent!! I've been avoiding flexbox for so long, this helps a ton
thanks! you're always helping demystify tricky behavior!
you're the css goat.
Really saved my time dude, thanks!
Before this video i was controlled by flexbox. Now I'm controlling flex box
Im sticking with grid.....its all I need.
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.
@@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!
You may need to learn Flex-box especially when many websites are using it instead of the wonderful GRID... :)
I already know flexbox.@@RickBeacham
I can’t recall why but there are some situations where flex is more suitable than grid.
Thank you for your video! Love it.. as a begginer its very helpful
Flexbox is taking control of my life 😳
Thanks!
Thanks so much!
amazing stuff! this will help my projects a lot!
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.
taking advantage of flex grow and shrink really made my layots mch better
I'm gonna try to use flex some more when it's suitable. Grid is just so good though 😅
Great video! Thanks Kevin
I tend to use flex-basis: to control the "fixed-size" elements
love it! 👏
Excellent explanation. Thanks!
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
man is saving us
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...
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
Bought the course. Any plans to make grid simplified?
Great Sir 🎉
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; ? 🤔
this episode was very Canadian with all the "outs" ❤️🇨🇦😉
THAT HOODIE!!!
The og border lime hack! Nice video
That's very helpful. Thank you
I have always just assigned a percentage width on each of the flex items and then they shrink and grow nicely.
This is really helpful
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?
@MrTicketeer understand the purpose of flex basis, but unclear how to use it..
@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
If I need consistent layout, usually I'm using grid
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.
To be honest i use both 😂
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.
What are the differences between flex-basis and width ? I always use width... But perhaps it is not the better solution ?
Why not space-between?
It would be nice if would resize and flex different images to a max-with.
How many times I fight with this problem :) Thanks
we are here to learn and all we see is your directions to your other videos and your course.
did display: grid; and grid-template-columns: auto 1fr auto; works same in this case?
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.
im using flex-1 instead flex-grow-1, when use case use flex-1 vs flex-grow ?
Thanks
this is nice to know. Tnx
He Kevin there must be starter code .Like there is full code availble.
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 😂
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🙏
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 😊
GODDDDDDD !!!!!
Which browser do you work on ?
I swear I only understand this because of Kevin
Amazing tnx
Why did you stop using Firefox? :(
make a video on
GRID
nice
what's happening with the webcam ?
almost want to use tables lol
Lack of understanding hints at hidden algorithm
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.
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.
@@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.
10:14 E
O_O -> --_--
Same price without breakfast? 😂
Just do everything on canvas /s
Let's go back to tables, seriously.
I hate Flexbox. Completely unreliable and undependable. Rubbish concept.
Tell us what you love then.
It's just garbage, unbelievable you guys have to work with this stuff
Lot of bs in this video tbh, unlike other good ones in this channel.
Please don't speak fast
You can use 0.75 speed
Why are you using these thumbnails so frequently 👎
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
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?
Nice one, Kevin. thanks.
{2024-04-23}