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.
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.
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!
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 🇮🇳
I'm in the FreeCodeCamp coding program at my local library and I found your tutorials on CZcams; 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!
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?
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
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 :)
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 😁
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 :)
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.
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!
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!
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!!!
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!
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 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.
I have a question. If I use display: "flex" then I switch to "flex-basis" instead of "width". Only for the patient with property flex and direct children (if needed). Is that a bad practise? Need opinion?
Kevin, thanks for this (and all your videos). Would setting the basis and/or flex-grow achieve a similar result or am I getting myself confused? Does this `width=100%` just make more sense and work better over all?
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.
"The nice thing about flexbox is that it is flexible."
Big if true
Father has blessed us with another 🔥 video. Much love!
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.
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.
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.
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.
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!
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 🇮🇳
I'm in the FreeCodeCamp coding program at my local library and I found your tutorials on CZcams; 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!
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.
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
Kevin, once again you break the whole! It's so easy to understand when you explain it like that. Thank you so much, dude.
🤯🤗
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!
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 :)
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.
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 😁
Kevin, my watch later list is basically your whole channel
I stumbled upon your channel accidentally and man !! you talk about real stuff
Welcome, and glad that you're enjoying my content!
whenever we face problem in design the only one question rises "why this happening". you just gave the answer. 💗🦉
Thank you Kevin for all of the helpful videos.
I now understand how flex-boxes actually shrink.
The 100% width also makes sense now.
Best CSS teacher on CZcams, thank you so much 👍
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 :)
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 :)
With you never disappointing you can always find the most advanced topics in CSS
That explains so much so eloquently, thanks!
This lesson shows that every problem has a simple solution. Thanks a lot
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.
Hi Kevin. Definitely one of the best front-end dev teachers I’ve seen!
Flex has flexed my brain beyond measure...no jokes. Thanks a lot for this video
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!
You are CSS god to me, the way you explain everything. I loved it. It's like got teaching us about life.
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!
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.
You're just a genie of css...just amazing!!!
Thank you Kevin Sir. Good Job. Really worth taking Lessons
You must be patron saint of CSS :D Thank you so much for every videos you ever made :D
Thanks for a great video and explanation! More "Why" videos please! It's the best way to learn!
Your tutorials are gold
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!
Love your content Kevin!!
I Learn a lot from this channel Thank you
im studying for full stack and i appreciate your videos soooo much
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!!!
Very good tip! I will use it this monday morning. I did not know the "gap" word before your video. Philippe P.
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 so much for simple explanation!
Very very nice presentation. Thank you
Thank you! I really enjoy your contents.
We need more simple tricks like this
How simple way to explain, thanks kevin.
damn you’re so good at this
Great explanation. Thank you
Great explanation, by the way, the quality of the video is so awesome
Thank you so much for doing this vids 🙏🏻
Kevin , couldn't you have released this earlier. Kevin the best guy for css tuts.
Good lesson and I like the pace. Subbed
First comment! Thank you so much Kevin. From Argentina 🇦🇷!
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.
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.
You have removed my confusions great !!!!
Fantastic explanation!
Great explanation. Thank you.
You are just an amazing teacher! :D
Thank you so much kevin, simple but really meaningfull
golden explanation is what I'd call this on the title 👌🏽👌🏽🌟
Nice work, I was only using flex for alignment and inline-block for the columns.
Soo informative. Thank you for creating this.
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%;
}
I love your videos thank you so much sir
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!
Thanks for sharing such a useful content .
Great explanation, thanks!
That is so helpful. Thanks!
this is eye opening , great vedio
Is there like a teachers Oscar we could nominate you for? Cause you deserve it!
Woah please do more of these
Brilliant, as usual 😊
Here goes my favorite css mentor
Great explanation, I finally get it
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.
kevin, I’m a huge fan. Thank you so much! Could you also cover: 4 even-columns, that break after column 2?
( instead of, after column 3 first )
that was a great and clear explanation, thanks
glad you like my content :D
Amazing content!
Flexbox is everything. Flexbox is life.
The lesson being, keep it 💯
Great Content.
Very useful video, thank you 👍
Glad that you enjoyed it!
My hero!
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.
I have a question. If I use display: "flex" then I switch to "flex-basis" instead of "width". Only for the patient with property flex and direct children (if needed). Is that a bad practise? Need opinion?
I love this man
Kevin, thanks for this (and all your videos). Would setting the basis and/or flex-grow achieve a similar result or am I getting myself confused? Does this `width=100%` just make more sense and work better over all?
So helpful!
i have been using flex:1 on the direct child elements.
Good stuff.
Brilliant.