I love how you explain **why** things behave / function the way they do. A lot of instructors just tell you a few things to do or try and then you run into problems in the real world, like you mentioned. I like that you care about your audience enough to give comprehensive instruction and explanation of why something is the way it is. You’re a teacher that makes it easy to follow along. Good job!
I work as a developer and I swear the tips and tricks I learn from your videos are invaluable keep it up. Other than Stackoverflow your one of my first go to destinations.
I am absolutely in love with this channel. This is how teaching should be done. You take an issue, you explain why it's an issue, and you teach a solution, and explain why that works too. Absolutely brilliant
Ok guys here's what you need to know... Give your parent element that contains your children the property display: flex; & flex-direction: row; Then give your children the property flex-grow: 1; and like magic you have yourself a pretty solid flexbox layout. CSS is life CSS is love :)
So I've been trying to do something like this with images, but I'm finding that the images aren't responding well to the flex-box grow property. (I'm trying to have one image take up 2/3 of the width of the page, and the other image 1/3, but flex-grow isn't making it work. However, I got my desired look by using a width of 200% on one image, and width 100% on the other...) Any idea why the flexbox grow property isn't cooperating with images?
Still coming back to your videos from a year ago and they're still saving my butt. You make CSS so easy to understand and best of all how best to organize it.
I'm in the FreeCodeCamp coding program at my local library and I found your tutorials on RUclips; you have no idea how helpful your videos are so please, don't stop doing them! I've told 3 of my classmates about your videos so I'm pretty sure they're finding them helpful as well. Thanks for explaining things so clearly!
Kevin, please don't stop doing what you do. As someone who is coming from the backend and trying to move to the frontend, I love your videos because they are so quick and informative.
Thank God I found your channel. Im new to front end and was having a hard time with flex box and things overflowing and not aligning correctly and the way you explain things helped me understand how to get it fixed. Keep up the great work!
Same here to be honest. One of the fun things about teaching things is you end up figuring out much more how they work, lol. Then I get to share that, and hopefully it helps :)
For anything design or CSS related, I always check if you have a video on it before googling ❤ guaranteed top quality! Keep up the great work as always 😁
I've been working on making a browser extension originally written for Chrome work across all browsers. And actually learning why properties be what they be has sped up that process tremendously. Thank you so much!
Was using for arranging elements exactly centered for almost 3 years and never understood properly. Hats off to you Kevin! Looking forward to see more of flex box videos. Lots of love from 🇮🇳
Thank you Keving. I feel that you give me motivation to continue learning in a welcoming atmosphere. I am slowly moving career from app rudimentary functional development to app design and user exprience UX/UI. i am so happy to follow your videos.
I was expecting to know a bit more about the difference between width and flex-basis, in overall I understand is better to have flex-basis than width. I don't know if this is relevant but I would like to know from you! I like your videos! awesome content, keep going!!!
This is an awesome video!!! Really helpful for me as i'M someone who's been working with backend for years and now has to do some CSS on a project, thank you!
Kevin, you are the KING OF CSS! Those, who want to know what they do (and not just copy-paste commands) and why, really appreciate the efforts (if it's an effort, but I think it's a pleasure for you) you make week by week. Keep up doing these amazing videos, we do really need them! Thanks a lot!
Very glad I found your channel. You have a great way of explaining how things work. I already had a solid understanding but it was great hearing your perspective and understanding of the property.
Thank you Kevin, this was so helpful! Would love to see more short videos like this explaining the function behind some basic CSS. I unfortunately never took a real course or learned CSS from the ground up but learned it aside to web development as a whole, that's why a quick basics video like this has a huge impact on me! Love your content, I'll keep watching :)
I thought I knew everything about flexbox. Than I created a container and i have given an specific width and inside this I made three other div with specific width. Than I used flex. And boom! Everthing inside the parent box is in mass.😂😂. Thanks Kevin. You are like just Gurdian Angel.
A mind of its own - perfect call! I am especially puzzled by the min-width: 0 trick that I usually need to use, esp when trying to get text-overflow: ellipsis in a fluid cell.
I was so happy when Flexbox finally got a gap property, save me having to deal with margins. But sadly its not supported on Safari yet which I didn't know till some client started complaining things are smashed together on his screen.
Thanks for sharing this smart trick. However, the solution using "width" does not work well if you want your flex container to wrap items, i.e. "flex-wrap: wrap;" - In this case, stretching items to the container width can still be accomplished by setting "flex: 1 1 0;" and a "min-width" instead of "width" for each flex item. Each item will start its layout with a zero width, expands to its required minimum width and can even grow further, if needed, to fit the whole container width. But... we would rather use CSS grid for such things. ;-)
In case you're wondering why not just flex: 1;, or flex-basis: 100%; Kevin's answer deep in comments below is: "Yup, because it gives them a flex-basis: of 0 then, but allows them to grow, so in the end it's the same effect, they all get the same width/flex-basis... in my case they are shrinking, in yours they grow. The beauty of CSS, lot's of ways to skin a cat :)"
well, I usually use "flex: 1;" It is farily usefull. And no need to think about width. Just, everything is equall. It has some complicated problems, like if I need one part to be bigger, but in most of the cases, this is no problem.
I always thought it just does what it does because it be what it do. 🥃
They dont think it be like it is but it do
😂😂
Damn that really do be how it is don't it
well I thought it's because it's flexible and stuff.
😂
I love how you explain **why** things behave / function the way they do. A lot of instructors just tell you a few things to do or try and then you run into problems in the real world, like you mentioned. I like that you care about your audience enough to give comprehensive instruction and explanation of why something is the way it is. You’re a teacher that makes it easy to follow along. Good job!
Thanks so much!
My thoughts exactly.
Kevin is definitely a thorough teacher.
I work as a developer and I swear the tips and tricks I learn from your videos are invaluable keep it up. Other than Stackoverflow your one of my first go to destinations.
I am absolutely in love with this channel. This is how teaching should be done. You take an issue, you explain why it's an issue, and you teach a solution, and explain why that works too. Absolutely brilliant
If you'd like to really dive into flexbox and learn the ins and outs of it and make creating layouts a breeze: flexboxsimplified.com
Hey Kevin, are you also planing on launching gridsimplified?
@@josecabana3d eventually, yup. Have some other things first, bit its in the plans!
Ok guys here's what you need to know... Give your parent element that contains your children the property display: flex; & flex-direction: row;
Then give your children the property flex-grow: 1; and like magic you have yourself a pretty solid flexbox layout. CSS is life CSS is love :)
So I've been trying to do something like this with images, but I'm finding that the images aren't responding well to the flex-box grow property. (I'm trying to have one image take up 2/3 of the width of the page, and the other image 1/3, but flex-grow isn't making it work. However, I got my desired look by using a width of 200% on one image, and width 100% on the other...) Any idea why the flexbox grow property isn't cooperating with images?
@@Nicklefritz if you set flex-basis:0 for your children and then give flex-grow they work correctly.
Still coming back to your videos from a year ago and they're still saving my butt. You make CSS so easy to understand and best of all how best to organize it.
I'm in the FreeCodeCamp coding program at my local library and I found your tutorials on RUclips; you have no idea how helpful your videos are so please, don't stop doing them! I've told 3 of my classmates about your videos so I'm pretty sure they're finding them helpful as well. Thanks for explaining things so clearly!
Father has blessed us with another 🔥 video. Much love!
With you never disappointing you can always find the most advanced topics in CSS
I stumbled upon your channel accidentally and man !! you talk about real stuff
Welcome, and glad that you're enjoying my content!
"The nice thing about flexbox is that it is flexible."
Big if true
Kevin, please don't stop doing what you do. As someone who is coming from the backend and trying to move to the frontend, I love your videos because they are so quick and informative.
The "flex-wrap" can save you some media queries once in a while too! =) Awesome video as always Kevin, really appreciate it!
hell yea also don’t forget flex-shrink and flex-grow!
But would flex-wrap work with width 100% ??
@@ScopedMach1neyou could clamp the width so that it has a minimum and then flex wrap.
Thank God I found your channel. Im new to front end and was having a hard time with flex box and things overflowing and not aligning correctly and the way you explain things helped me understand how to get it fixed. Keep up the great work!
This lesson shows that every problem has a simple solution. Thanks a lot
It's amazing that I've been using flexbox for so long and never stopped to think *why* it does what it does. Brilliant video! Thanks.
Same here to be honest. One of the fun things about teaching things is you end up figuring out much more how they work, lol. Then I get to share that, and hopefully it helps :)
Kevin, once again you break the whole! It's so easy to understand when you explain it like that. Thank you so much, dude.
🤯🤗
You are CSS god to me, the way you explain everything. I loved it. It's like got teaching us about life.
Thank you Kevin for all of the helpful videos.
I now understand how flex-boxes actually shrink.
The 100% width also makes sense now.
Kevin honestly since stumbling upon your channel my life has changed for the better. After a pause of 6 years I fell in love with CSS again.
Excellent stuffs as usual. Love how you explain "why" first than the usual "how to fix it". Applies for all of your videos.
For anything design or CSS related, I always check if you have a video on it before googling ❤ guaranteed top quality! Keep up the great work as always 😁
I've been working on making a browser extension originally written for Chrome work across all browsers.
And actually learning why properties be what they be has sped up that process tremendously.
Thank you so much!
whenever we face problem in design the only one question rises "why this happening". you just gave the answer. 💗🦉
Was using for arranging elements exactly centered for almost 3 years and never understood properly. Hats off to you Kevin! Looking forward to see more of flex box videos. Lots of love from 🇮🇳
Best CSS teacher on RUclips, thank you so much 👍
Very good tip! I will use it this monday morning. I did not know the "gap" word before your video. Philippe P.
Flex has flexed my brain beyond measure...no jokes. Thanks a lot for this video
Thank you Kevin Sir. Good Job. Really worth taking Lessons
That explains so much so eloquently, thanks!
If you have enjoyed? Come on Kevin, enjoy is such a small word, it has made me happier in life as a whole.
Thank you Keving. I feel that you give me motivation to continue learning in a welcoming atmosphere. I am slowly moving career from app rudimentary functional development to app design and user exprience UX/UI. i am so happy to follow your videos.
Thanks for a great video and explanation! More "Why" videos please! It's the best way to learn!
im studying for full stack and i appreciate your videos soooo much
Sometimes it has a mind of it's own is so true. No matter how comfortable you get with it it can still just be odd at times.
I was expecting to know a bit more about the difference between width and flex-basis, in overall I understand is better to have flex-basis than width.
I don't know if this is relevant but I would like to know from you!
I like your videos! awesome content, keep going!!!
This is an awesome video!!! Really helpful for me as i'M someone who's been working with backend for years and now has to do some CSS on a project, thank you!
Nice work, I was only using flex for alignment and inline-block for the columns.
Kevin , couldn't you have released this earlier. Kevin the best guy for css tuts.
Kevin, you are the KING OF CSS! Those, who want to know what they do (and not just copy-paste commands) and why, really appreciate the efforts (if it's an effort, but I think it's a pleasure for you) you make week by week. Keep up doing these amazing videos, we do really need them! Thanks a lot!
Very glad I found your channel. You have a great way of explaining how things work. I already had a solid understanding but it was great hearing your perspective and understanding of the property.
Kevin, my watch later list is basically your whole channel
Thank you Kevin, this was so helpful! Would love to see more short videos like this explaining the function behind some basic CSS.
I unfortunately never took a real course or learned CSS from the ground up but learned it aside to web development as a whole, that's why a quick basics video like this has a huge impact on me! Love your content, I'll keep watching :)
been using flexbox for a while now and I kinda just wing it and try random things until i find a solution haha
this video was so helpful!
You have removed my confusions great !!!!
Thank you! I really enjoy your contents.
been using flexbox every day for the past year. and still clicked :p. idk what i expected. but great video never the less!!! love all your vids :)
How simple way to explain, thanks kevin.
I've been doing web dev for 20 years and I feel like an idiot almost every time I watch one of your videos. I love it. Thank you.
I agree - I've got 24 years in web design & development, and still learn something new every day.
I think I love you.... I just jump to Lear this world of coding about a month ago and how you explain things is the best.
We need more simple tricks like this
Hi Kevin. Definitely one of the best front-end dev teachers I’ve seen!
Very very nice presentation. Thank you
I Learn a lot from this channel Thank you
I thought I knew everything about flexbox. Than I created a container and i have given an specific width and inside this I made three other div with specific width. Than I used flex. And boom! Everthing inside the parent box is in mass.😂😂. Thanks Kevin. You are like just Gurdian Angel.
First comment! Thank you so much Kevin. From Argentina 🇦🇷!
damn you’re so good at this
Is there like a teachers Oscar we could nominate you for? Cause you deserve it!
You're just a genie of css...just amazing!!!
What about flex:1; or flase-basis:100%; instead of width:100%; ?
sure, was thinking this in the entire video, just put flex: 1
Myself included
.col {
flex: 0 0 100%;
}
Your tutorials are gold
You must be patron saint of CSS :D Thank you so much for every videos you ever made :D
Thank you so much for simple explanation!
Great explanation, by the way, the quality of the video is so awesome
Flexbox is everything. Flexbox is life.
A mind of its own - perfect call! I am especially puzzled by the min-width: 0 trick that I usually need to use, esp when trying to get text-overflow: ellipsis in a fluid cell.
Fantastic explanation!
Great Content.
That is so helpful. Thanks!
I was so happy when Flexbox finally got a gap property, save me having to deal with margins. But sadly its not supported on Safari yet which I didn't know till some client started complaining things are smashed together on his screen.
It does this 💪
golden explanation is what I'd call this on the title 👌🏽👌🏽🌟
Good lesson and I like the pace. Subbed
Thank you so much kevin, simple but really meaningfull
this is eye opening , great vedio
Amazing content!
that was a great and clear explanation, thanks
glad you like my content :D
Any difference between `with: 100%` and `flex-basis: 1`?
I love your videos thank you so much sir
Great explanation, I finally get it
Thank you
Thanks for sharing this smart trick. However, the solution using "width" does not work well if you want your flex container to wrap items, i.e. "flex-wrap: wrap;" - In this case, stretching items to the container width can still be accomplished by setting "flex: 1 1 0;" and a "min-width" instead of "width" for each flex item. Each item will start its layout with a zero width, expands to its required minimum width and can even grow further, if needed, to fit the whole container width. But... we would rather use CSS grid for such things. ;-)
Thanks for sharing such a useful content .
Very useful video, thank you 👍
Glad that you enjoyed it!
I'd go for `grid: repeat(auto-fit, minmax(100px,1fr))` in this case and save myself the media query requirement ;)
Great explanation. Thank you.
you are the god of css
The lesson being, keep it 💯
Soo informative. Thank you for creating this.
Good stuff.
Here goes my favorite css mentor
You are just an amazing teacher! :D
and thus i finally understand what flex is and does....finally!!!! thank you!!!!
Thank you so much for doing this vids 🙏🏻
In case you're wondering why not just flex: 1;, or flex-basis: 100%; Kevin's answer deep in comments below is:
"Yup, because it gives them a flex-basis: of 0 then, but allows them to grow, so in the end it's the same effect, they all get the same width/flex-basis... in my case they are shrinking, in yours they grow. The beauty of CSS, lot's of ways to skin a cat :)"
Love your content Kevin!!
well, I usually use "flex: 1;"
It is farily usefull. And no need to think about width. Just, everything is equall. It has some complicated problems, like if I need one part to be bigger, but in most of the cases, this is no problem.
great video! im making a riding school administration web app for a school assignment and this really helped :]
i have been using flex:1 on the direct child elements.