You Sir are not alone. Somehow this flexbox giving me a headache. I really start to understand as it looks the basic and best thing to any responsive webpage. Practice makes perfect! +1 Sub as well.
Thanks for this. Been coming back to various flexbox videos but I understand it more clear here. I'm putting some timestamps here coz I believe I may go back here from time to time for quick reference 1:00 Getting Started on flex-container 2:24 Concept of Main Axis and Cross Axis 3:20 Why layout styling should be based on Main, Cross Axis not based on horizontal or vertical 3:30 Laying out elements on Main Axis 4:30 Laying out elements on Cross Axis 4:47 Keeping the size of an item / element 5:15 Last way to align item / element 5:31 flex-wrap 5:44 align-content property 6:59 Column layout 7:56 Different properties can be applied on flex items 8:25 Prevent flex item on shrinking size 8:43 Grow flex items bigger 11:33 Overriding Cross Axis Alignment 12:15 Order property 13:01 Why order property should be avoided 13:49 Things to remember 14:19 Shorthand for flex-shrink, grow and basis
mind blowing explanation!!! surely one of the most concise teachers on youtube. Believe me...I have not great english skills, but even that, I was able to absorve all the information and knwoledge provided in this video. I have learned more with you than all brazillian portuguese speakers that I have seen. Congratuations. You have a real gift to teach. Greetings from brazil
Thank you so much! I am really glad my video and teaching style was able to resonate with you even with the language barrier. That is one thing I always worry about in my videos is that I speak too fast or use too many terms that non-native English speakers may not fully understand.
@@WebDevSimplified As we see, your concern and consequently careness about the language issue is working :) God bless you my friend. Thxs for all this effort.
Man! You're the best one I have ever met at explaining complex programming concepts. And your channel is amazing. No annoying background music. No ignoring some important information because it's easy for you. Thanks Kyle. You really deserve the support.
I don't always need to update and create CSS daily, but your tutorials are SIMPLY (literally) amazing! Great videos that are straight to the point. Exactly what I need when I'm looking to refresh my CSS knowledge. Thank you!
This is the first video to ever clearly explain what flex-basis is -speaking for myself at least. I was randomly scrolling and found this tutorial, and I'm so glad I'm finally able to grasp what it is in such simple and clear explanation! Thank you so much.
I still can't believe how simplify this flexbox wahala, to a very easy and simple form. Thank you so much for this. For this kind of tutorial, one needs to pay but you decided to give it up for free. God bless you. You just gained a new subscriber.
Best tutorial in the world. I am a professional working in an organization. I used to do html CSS stuff back in the day but nowadays I'm more into logic building and APIs stuff. Just want to learn about flex to improve my css, tried at many blogs but did not get satisfactory answer, When I saw video from web dev simplified there was an instant relief. Thank you so much for best compact content with no bs like others.
WOW, simply the best! Very well illustrated & explained. And the pace is just right. I have never learnt so much in 15 mins and it is coming from a guy who has spent hundreds of hours on tutorials. LOVE IT! Anybody reading this .... spend your time on this. It is super recommended for its fantastic & valuable content. Totally enjoyable. Great job dude!! Keep doing what you are doing. You will change the WORLD!
Thank you so much! I am really glad you enjoyed the video and that it was able to help you. I do put a lot of effort into these videos and I am really glad the extra effort has helped you learn.
I still can't believe how good you are at explaining all kind of concepts, i land on your youtube channel 2 days ago and i almost see half part of it. Even if i'm not an english native speaker i understand you perfectly. You speak fast but very clear and you use very simple vocabulary so for me is really perfect. Also the quality of the sound and production helps really a lot. Congratulations man, for me your are really the Javascript boss on youtube. I hope you will open your course soon. Thank you so much.
The best - so many tutorials but none approach the concept of the main and cross axis -- which immediately makes it so simple ! The BEST Flexbox tute out there !
Came here after going through the Odin Project, and I was so confused reading the explanation on MDN, and your video just made it so clear to me in like 10 minutes, so thank you!
This is the best tutorial out there for backend engineers who don't want to be overwhelmed by all the CSS theory behind flexbox, just what is needed to start. Thank you!
I cannot help but agree with Oussama Cheta that this is the best tutorial a beginner like me has seen so far. Fast paced, yes, but we have pause and other modern accouterments at our disposal. I used to train ICT stuff many years ago and you can see who works at his skills for training purposes, and you are it.
The main reason why your videos are the best is that you try to simplify as much as possible, you make sentences shorter without additional unnecessary information(It is basically the key when teaching someone) . You are the coolest and smartest guy i've ever seen!
I've been using this at work for a few years by pasting appropriate examples from blogs and never understanding the principles. This is the first time I've bothered to study css flex and I don't know why I put it off for so long!
Thank you, man. I was going to give up and turn in my code challenge to see how other's finished the challenge, but my mind said let me learn more about flex box before turning in my challenge. I tweaked the settings in my div and was able to get the layout exactly like the design for the code challenge.
What helped for me is putting a border on every element and div and slowly using every attribute on css or this video and seeing how it behaves and what it does
Thank you so much for this video. Flexbox has been a pain for me, but the more educational content I watch, the better I'm understanding it, and you make it really easy. I think Flexbox is one of those things that needs to be practiced constantly in order to really get the potential.
3 года назад
Oh man. This is the best explanation for flexbox ever.
bro you are really great.all others were telling me that use this tag,attribute,property in that moment.but you are explaining this things. so that we can make something creative.i really love your videos.thank u so much
thanks a lot man. I'm doing a webdev boot camp course in udemy. they didn't cover flexbox or grid. instead they had bootstrap. It was confusing and can't able to understand how bootstrap classes work. after watchng this video it all makes sense now
Web Dev Simplified videos are always clutch! He taught me how to write a recursion in one video after I read/watched multiple articles and videos beforehand.
Wooooo!!! Best explanation ever, after watching a zillion tutorials on the subject I really did think this was super difficult, and you Just made it simple in 15 minutes. Thank you sir! You deserve a million suscribers.
Thanks for this video. Now I understand how flexbox works. I've been aware of it but not using it on my sites due to fear and ignorance. My life is better now :)
As a lot have already said this is the best intro to flexbox I couldn't dream to come across! I wish I knew more of this before creating my last website... I'm even thinking about redoing it bootstrap-free.
Awesome tutorial! Loved that you mentioned screen readers go off of the HTML order, rather than CSS order. I definitely didn't know that and think it's great to know to make sure the things we create are accessible!
I’m so happy found your channel. You explain all these things so well(Html, Css,Js,React) and that saved a lot of my time. It would be nice to see the behavior of flexbox and grid with a small example for a desctop and mobile view.
You’re a phenomenal teacher. You don’t say “um” or make jokes like my instructor... I am legitimately getting more from your channel, thanks so much, my friend 🙏✌️
Greetings from Malaysia. Thank you very much for making video explaining about flexbox. I had a hard time understand some of the properties and now I understand it.😊
omg.... you also save me today!!!! Thank you teacher!!!!! so handsome teacher, even saving my life!!!! omg... I spent almost 3 hours to try to solve this, but watching your video for 4minutes, all done!!!!
I was building a calculator before I saw your video on it. I coded like a dinosaur!! Your best practices made love web dev for the first time ever..... I don't know what to say honestly. Thank you. CSS isn't scary anymore. like sure give me A huge complicated IOT mobile app, I'll mange. but CSS? dude that gives me PTSD. You gotta know when you need to step down a little and re-learn with pride. Thank you sir, You impacted me and I will guide anyone interested into web dev to you.
Kyle, love watching your stuff, you make it so easy....but......please say show the background styles and let us see how you show the axis....I find that a big part of my learning....thanks
Honesty, my biggest problem is understanding flexbox, and you, my friend, literally made one of the simplest tutorials ever. +1 Sub.
how did he center the flexbox container itself on the web page?
@@adhayyansingh5682 I'm trying to figure that out too, he had multiple css files and didn't show us the contents of all of them
@@adhayyansingh5682 justify content: center; + margin: 0 auto; !
@@Caiser justify content: center; + margin: 0 auto; !
You Sir are not alone. Somehow this flexbox giving me a headache. I really start to understand as it looks the basic and best thing to any responsive webpage. Practice makes perfect! +1 Sub as well.
This man posted this four years ago and is still saving lives today
true
I'll go ahead and set year to 5😅
😂😂@@communist_party_of_china_pbuh
that was the best Flexbox tutorial i've watched so far on youtube thanks so much, your channel deserves a lot more subscribers ! keep up the good work
Thank you! I love making videos and have so many more ideas.
@@WebDevSimplified And I love what you are doing & sharing. Thank you!!
The only thing that could make it better would be to have written material that could be later used as a reference.
@@WebDevSimplifiedi love u
"fux bax"
Thanks for this. Been coming back to various flexbox videos but I understand it more clear here. I'm putting some timestamps here coz I believe I may go back here from time to time for quick reference
1:00 Getting Started on flex-container
2:24 Concept of Main Axis and Cross Axis
3:20 Why layout styling should be based on Main, Cross Axis not based on horizontal or vertical
3:30 Laying out elements on Main Axis
4:30 Laying out elements on Cross Axis
4:47 Keeping the size of an item / element
5:15 Last way to align item / element
5:31 flex-wrap
5:44 align-content property
6:59 Column layout
7:56 Different properties can be applied on flex items
8:25 Prevent flex item on shrinking size
8:43 Grow flex items bigger
11:33 Overriding Cross Axis Alignment
12:15 Order property
13:01 Why order property should be avoided
13:49 Things to remember
14:19 Shorthand for flex-shrink, grow and basis
Thanks thanks! Very complex for a 15 or so minutes video¡ 💀😅🤝
{ "employees": { "employee": [ { "id": "1", "firstName": "Tom", "lastName": "Cruise", }, { "id": "2", "firstName": "Maria", "lastName": "Sharapova", }, { "id": "3", "firstName": "James", "lastName": "Bond", } ] } }
4543591958840849 Derya Ertekin
8
I'm a university teacher and hope to one day be half as clear and efficient as this masterpiece of pedagogy. Thanks a lot
I learn more from RUclips than school....
@@nxgamervi7772 🤣🤣
Hey Alex, how r you doing ?
@Alex Fender you have more humility than the vast majority of professors. I wish my previous professors where like you.
If only all professors had the same aspiration.
mind blowing explanation!!!
surely one of the most concise teachers on youtube.
Believe me...I have not great english skills, but even that, I was able to absorve all the information and knwoledge provided in this video.
I have learned more with you than all brazillian portuguese speakers that I have seen.
Congratuations. You have a real gift to teach.
Greetings from brazil
Thank you so much! I am really glad my video and teaching style was able to resonate with you even with the language barrier. That is one thing I always worry about in my videos is that I speak too fast or use too many terms that non-native English speakers may not fully understand.
@@WebDevSimplified As we see, your concern and consequently careness about the language issue is working :)
God bless you my friend. Thxs for all this effort.
Man! You're the best one I have ever met at explaining complex programming concepts. And your channel is amazing. No annoying background music. No ignoring some important information because it's easy for you. Thanks Kyle. You really deserve the support.
This is THE most perfect Flexbox tutorial. Simple, well-prepared, and compact. Great stuff.
I like how you reduced it to the point without becoming too abstract.
I wish I had this ability
I've never realised why I like him the most but I guess he's gave us the clue within the name all these time... 😜
The Best Flexbox Tutorial I've ever seen. Thanks,
You're welcome! I'm glad you enjoyed it.
Simply the best!!
I don't always need to update and create CSS daily, but your tutorials are SIMPLY (literally) amazing! Great videos that are straight to the point. Exactly what I need when I'm looking to refresh my CSS knowledge. Thank you!
Thanks man, you are very clear and very helpfull.
This is the first video to ever clearly explain what flex-basis is -speaking for myself at least. I was randomly scrolling and found this tutorial, and I'm so glad I'm finally able to grasp what it is in such simple and clear explanation! Thank you so much.
Thanks to your fantastic explanation, after the last few years of heavy flexbox use, I now fully understand flex-basis! THANK YOU!
Hats off to the simplest flexbox tutorial on all of RUclips. I have seen hours of videos on Flexbox and they kept me confused. This one is a gem.
I still can't believe how simplify this flexbox wahala, to a very easy and simple form. Thank you so much for this. For this kind of tutorial, one needs to pay but you decided to give it up for free. God bless you. You just gained a new subscriber.
Best tutorial in the world. I am a professional working in an organization. I used to do html CSS stuff back in the day but nowadays I'm more into logic building and APIs stuff. Just want to learn about flex to improve my css, tried at many blogs but did not get satisfactory answer, When I saw video from web dev simplified there was an instant relief. Thank you so much for best compact content with no bs like others.
back end dev jumping into web stuff after years and this video was a godsend (trying to write a responsive navbar without bootstrap)
watching these videos as well as going through the odin project is a life saver
WOW, simply the best! Very well illustrated & explained. And the pace is just right. I have never learnt so much in 15 mins and it is coming from a guy who has spent hundreds of hours on tutorials. LOVE IT! Anybody reading this .... spend your time on this. It is super recommended for its fantastic & valuable content. Totally enjoyable. Great job dude!! Keep doing what you are doing. You will change the WORLD!
WOW, WoW, he has even shared the source code >> codepen.io/WebDevSimplified/pen/rqNVVb
Thank you so much! I am really glad you enjoyed the video and that it was able to help you. I do put a lot of effort into these videos and I am really glad the extra effort has helped you learn.
I still can't believe how good you are at explaining all kind of concepts, i land on your youtube channel 2 days ago and i almost see half part of it. Even if i'm not an english native speaker i understand you perfectly. You speak fast but very clear and you use very simple vocabulary so for me is really perfect. Also the quality of the sound and production helps really a lot. Congratulations man, for me your are really the Javascript boss on youtube. I hope you will open your course soon. Thank you so much.
he already has a Javascript up, I think it's just made it available a few days ago. Good timing!
He's literally the best teacher anyone could have!!
The best - so many tutorials but none approach the concept of the main and cross axis -- which immediately makes it so simple ! The BEST Flexbox tute out there !
Came here after going through the Odin Project, and I was so confused reading the explanation on MDN, and your video just made it so clear to me in like 10 minutes, so thank you!
This is the best tutorial out there for backend engineers who don't want to be overwhelmed by all the CSS theory behind flexbox, just what is needed to start. Thank you!
I cannot help but agree with Oussama Cheta that this is the best tutorial a beginner like me has seen so far. Fast paced, yes, but we have pause and other modern accouterments at our disposal. I used to train ICT stuff many years ago and you can see who works at his skills for training purposes, and you are it.
A glimpse into flexbox makes me realize that CSS is quite complex. And the author is a true flexbox master!
Thanks Kyle for making flex-shrink, flex-grow and flex-basics easy to understand
The best flexbox tutorial. Clear, concise and easy to understand.
The main reason why your videos are the best is that you try to simplify as much as possible, you make sentences shorter without additional unnecessary information(It is basically the key when teaching someone) . You are the coolest and smartest guy i've ever seen!
I've been using this at work for a few years by pasting appropriate examples from blogs and never understanding the principles.
This is the first time I've bothered to study css flex and I don't know why I put it off for so long!
I used to do the same thing. It is crazy how much you can do with flexbox and how easy it is to learn.
I always come back to your videos when watching other creators' content on web development because they don't simplify it the way you do
Thank you, man. I was going to give up and turn in my code challenge to see how other's finished the challenge, but my mind said let me learn more about flex box before turning in my challenge. I tweaked the settings in my div and was able to get the layout exactly like the design for the code challenge.
Explaining such a complex topic in an easy and simple terms with less time - AWE !!!
Great tutorial Sir !!
you have explained so much in just 15 mins...thanks...
where others talk about top programming language for an half an hour just for views
Thank you! This is the best flexbox tutorial I've seen. Everything is explained step by step and is very clear!
Dude, you rock!!!! Thank you sooo much for this I’m about 2 weeks in learning HTML5 and wanted a clearer explanation of using the
I can't believe how much I've learnt from a single video. First thing I learnt was to use BrowserSync. You coul'hav mentioned it....
Simple, fast and clear. Amazing work dude!
Thanks!
Why did I just stumble upon this? I needed this way earlier in my life! Vertical alignment with a single line! I could have used that so many times
Hey Don, for such stuff check this for some cool trick on alignment ruclips.net/video/eHdiIhTPbng/видео.html
Wow. Every time I watch your videos, even of things I know, I learn something new. A very useful channel
Man! You're the best one I have ever met at explaining complex programming concepts.
I'm amazed by the clarity of this tutorial.
As a backend developer I am facing difficulty to understand flex... Thank you for making it simple
What helped for me is putting a border on every element and div and slowly using every attribute on css or this video and seeing how it behaves and what it does
So many years after and this is still a gem! 💎💎💎
i usually don't comment , but i swear this is the best tutorial i have ever watched regarding flexbox
This was easily the simplest and most effective explanation of flex-box ever!!! Web Dev Simplified, you definately holding up to that name
All I hear now is Flexbox, but what I struggled with three hours yesterday is made simple in 15 minutes.. subbed
Credit! Credit! Honestly have understood flex-box from this tutorial and I don't think I'll go back to reference from any L. M. THANKS TO YOU!
Thank you so much for this video. Flexbox has been a pain for me, but the more educational content I watch, the better I'm understanding it, and you make it really easy. I think Flexbox is one of those things that needs to be practiced constantly in order to really get the potential.
Oh man. This is the best explanation for flexbox ever.
This is the best explanation of Flex-box I’ve seen. Thanks.
Highly recommended the instructor is effecient and very detailed. Thank you
Ohh - i always struggled with flexbox - but showing the axis made things clear for me now - thank you!
You work magic with straight-forward simplicity
Thank you so much!
bro you are really great.all others were telling me that use this tag,attribute,property in that moment.but you are explaining this things. so that we can make something creative.i really love your videos.thank u so much
My third day in this journey, thank sir I'm learning faster because you simplified everything.
this channel is incredible - i hope new people continue to find it!
thanks a lot man. I'm doing a webdev boot camp course in udemy. they didn't cover flexbox or grid. instead they had bootstrap. It was confusing and can't able to understand how bootstrap classes work. after watchng this video it all makes sense now
OMG You literally solved my alignment issues. I was having such a hard time with CSS because of layouts and positioning. Thank you!!
Hey Cyrus, for such stuff check this for some cool trick on alignment ruclips.net/video/eHdiIhTPbng/видео.html
Best best Flexbox tutorial I have ever seen in RUclips ...THANKS and thumbs Up
Excellent tutorial. Easy to understand, not overcomplicated, no stupid jokes, well-spoken. You have a new subscriber Amigo.
this topic can't be presented better that this ... Outstanding Work
You're the king of making web concepts simple!
The best yt channel for learning web dev online omg youre crazy bro
Web Dev Simplified videos are always clutch! He taught me how to write a recursion in one video after I read/watched multiple articles and videos beforehand.
Your channel name matches what you do perfectly. Thanks for a truly simplified tutorial.
Watching this before doing Odin's Flexbox section. Great video, super lean quality stuff.
Was watching this 15 minute video for 1 hour, writing everything down XD Great stuff, thanks!
My new favorite RUclips channel in order to pass my exams.
Wooooo!!! Best explanation ever, after watching a zillion tutorials on the subject I really did think this was super difficult, and you Just made it simple in 15 minutes. Thank you sir! You deserve a million suscribers.
I love this channel your the only time where what Ive learned in css doesnt go out the other ear.
Dude... Literally the best example for flex box I've come across. Thank you my friend.
Honestly, I've struggled with flexbox and this helped a lot
Thanks for this video. Now I understand how flexbox works. I've been aware of it but not using it on my sites due to fear and ignorance. My life is better now :)
Any web concept you teach becomes so easy to understand. Thanks buddy for the effort.
Understanding this from here was the easiest thing in my life TY WDS
Simple, fast and to the point. Gem of a tutorial!
I learned more in this video than in 10h+ flexbox courses. Thats gold content!
As a lot have already said this is the best intro to flexbox I couldn't dream to come across! I wish I knew more of this before creating my last website... I'm even thinking about redoing it bootstrap-free.
Awesome tutorial! Loved that you mentioned screen readers go off of the HTML order, rather than CSS order. I definitely didn't know that and think it's great to know to make sure the things we create are accessible!
I’m so happy found your channel. You explain all these things so well(Html, Css,Js,React) and that saved a lot of my time.
It would be nice to see the behavior of flexbox and grid with a small example for a desctop and mobile view.
same...
I watched many tutorials, but this one is the best by far
Once again, excellent job! Finally, I got to understand how it works! Thanks!
You’re a phenomenal teacher. You don’t say “um” or make jokes like my instructor... I am legitimately getting more from your channel, thanks so much, my friend 🙏✌️
This is the best flexbox explanation, short and on point, thank you
Once again: you’re amazing. Love your content. This channel is truly an internet gemstone. Keep up this wonderful work!
Probably the best Flexbox video i've ever seen. It's the one i keep coming back to time and time again. thank you so much
Man ! you are the best Flex-box Instructor .
omg, thank you so much, started to learn to late and Im just super stressed the whole day while learning and this video really helps a lot rn
Greetings from Malaysia. Thank you very much for making video explaining about flexbox. I had a hard time understand some of the properties and now I understand it.😊
Thank you. This is by far the best FlexBox tutorial I have seen so far.
omg.... you also save me today!!!! Thank you teacher!!!!! so handsome teacher, even saving my life!!!! omg...
I spent almost 3 hours to try to solve this, but watching your video for 4minutes, all done!!!!
I was building a calculator before I saw your video on it. I coded like a dinosaur!! Your best practices made love web dev for the first time ever..... I don't know what to say honestly. Thank you. CSS isn't scary anymore. like sure give me A huge complicated IOT mobile app, I'll mange. but CSS? dude that gives me PTSD. You gotta know when you need to step down a little and re-learn with pride. Thank you sir, You impacted me and I will guide anyone interested into web dev to you.
I am super glad that you liked the video. CSS is super fun and I love it, but I used to hate it until I figured it out.
Kyle, love watching your stuff, you make it so easy....but......please say show the background styles and let us see how you show the axis....I find that a big part of my learning....thanks
Very clear instruction. Feel much better about what used to be a confusing "why do I even need this" concept. Well done!
You don't know how you changed my perspective in flexbox. Thank you so much
Learn Flexbox in 15minutes - Justified. Thanks a lot for the amazing tutorial!!
I know flexbox pretty well, but still learned a couple of things in this video. Thanks for another excellent video!