CSS Flexbox Tutorial for Beginners | Basics & Container | 1/2

[@MetaBlueAvatar]

"Align items always refers to the positioning of elements along the cross axis". Never going to forget that now! Thank you for the excellent explanation

[@DrWambua]

"justify-content" on the same breadth does the same along the main-axis. ;)

[@jakubrpawlowski]

This is hands down the best explanation of flexbox on KZbin. Great job Manu!

[@academind]

It is so amazing to get such a rewarding feedback, thank you very very much Jakub :)

[@svendbentjensen5512]

So you've seen ALL other videos on this subject? Every single one in the world?

[@taariqq]

@@svendbentjensen5512 a month on and if you were to re-read what you wrote, doesn't that sound kinda 'stupid' comment!

[@taariqq]

Most helpful thing about their teaching style, clear demarcation of ideas and listing the values used in them. Great tutorial!

[@divisorZero]

you can TEATCH, not just give information. Thank you for your explanations! I mean all you youtube and courses!

[@natashasimone1931]

I've spent about a week trying to understand Flex boxes I finally understand thanks to you! Thank you!! :-D

[@petermckinnon386]

How can ppl give this a thumbs down. I was struggling to understand Flexbox until I came across this tutorial. The best explanation and diagrams to illustrate the direction on KZbin. Thank you so much.

[@deepeebee62]

Definitely the best explanation of Flexbox I have encountered. I especially like that the CONTAINER and the FLEX ITEMS are being discussed separately. Top notch. Ten stars. Thank you for doing this & posting it.

[@academind]

Great to hear, thank you!

[@cerealrakist7360]

Sir ty so much for this! I learned flexbox recently but was having issues and nobody else explained the rules like you did so I’ve been struggling ! Now it makes sense! You’re so gracious to help us for free!! Big hug ty !

[@giorgiobarone9784]

This is probably the best tutorial about flexbox. The way you explain is very clear, your English is perfect and to show the concepts on the screen helps a lot. Well done! My compliments!

[@academind]

Thank you very very much for your fantastic feedback Giorgio, this really means a lot to me :)

[@bassam.2023]

I finally get it! You don't know how hard this has been, but this tutorial has increased my confidence tenfold. Thank you, Manuel/Academind!

[@Darragh1]

Was doing an online Bootcamp and came to flexbox (align-items, justify etc) and it all got a bit confusing, so when i saw Academind explaining it I was like: "click" and sure enough....now I'm starting to get it. :) Max and Man are so clued into teaching these topics at the beginner level. Wunderbar, Wie von mir ;) :)

[@kenanklovitch8117]

Wow, the best video tutorial on flexbox I have found, you have taken the frustration out of learning flexbox, I can't thank you enough!

[@academind]

Thanks a million for your awesome feedback Ken, it honestly makes me happy to read that the video was helpful for you :)

[@AhmedMkhinini]

if you don't understand flexbox after this, you will never understand it. best flexbox explanations ! GJ

[@mu7am2d]

This is really the best explanation of flexbox that I found so far! I have been struggling to understand it, but this is THE REAL DEAL! Thank you guys!

[@academind]

Awesome to read that Mohammed, thanks a lot!

[@mu7am2d]

Academind i will also be purchasing thr css course on Udemy to apply it on the Angular knowledge that I learned from Maximilian! Your udemy courses changed my programming skills completely. Thanks again

[@justsomeguy2759]

Finally, someone who can actually explain Flexbox properly

[@angelamiller4740]

This was SO well done & SO easy to understand! THANK YOU!

[@t.l.e.e.]

You are awesome and have an amazing teaching style. You use all your video making tools to their highest potential and help others to do the same with their code.

[@samueltorres2485]

Thank you for adding Theory and explaining flexbox, not just "code what I am coding"

[@rukaiyakhan2406]

Best tutor so far!!! Explained so well. Thank you so much.

[@tg-shyam2887]

man never saw such a good explanation like this thanks a lot for such an excellelent video keep going

[@mohmmadqudah2331]

you are the only person i understand flexbox with keep it up you are killing it :)

[@pilatec]

There are very few good flex-box tutorials on youtube and this is one them.

[@auxreves4957]

You are the best CSS teacher I've encountered, sir. Thank you

[@robertw671]

Very good video. I have learned a lot from it. Thank you. The one confusing term for me was: Cross direction (?) Every time I heard it, I had to 'translate' it in my head to: Wrap direction. The direction that the elements will be moved when wrapping.

[@MatterLabz]

This is the first of your videos I've watched. It will not be the last. New subscriber! You are an excellent teacher. The flow of these lessons are so well thought out. Great job. Thanks.

[@academind]

Thank you very very much for these nice words, happy to have you on board of the channel :)

[@sarahbebe5022]

Thank you so much for explaining this so well! I have been struggling with Flex-Box and you have made it to simple for me to grasp. So many lightbulb moments! I'm off to watch part 2.

[@emiliep1732]

Great complement to your 100daysofcode course! I wanted to have a deep dive into CSS positions/flexbox as it's quite a complicated logic to learn, kind of make you dizzy (where's the cross axis, the floor, where am I?.. ahh). Well, now I understand it better... but I definitively need practise :D vielen Dank, you're both the clearest and most didactical from all the other contents I've seen!

[@harpreetsingh6802]

jst watched 10min of tutorial and i can't stop myself to pause the video and comment first. I have never seen this deep explanation of flex-box tutorials. Thanks mate :)

[@academind]

Thanks a million for your awesome feedback Harpreet, it just fantastic to read that you like the video!

[@loze]

Thank you, I finally understand how align-item works now !!!!!!!!

[@solivagant1170]

Took me a bit but after thinking it over and some playing around, I get it! Thanks!

[@michal2135]

the finest flexbox explanation !

[@Saaad2]

Using flex-direction and flex-wrap would be better option than using flex-flow as that is more easier to grasp for first time learners. When you're teaching then you have to make it simple, you don't do it your own, but the simpler and easiest way. Overall good video!

[@preethirmani]

Very nice explanation on Flex Box! Thanks a ton!!!

[@damienhackney6499]

First class tuition! Thank you.

[@punithm7480]

Sir Amazing Explanation cleared all my doubts thank you

[@iamreg1965]

Excellent video on flexbox Max. Nice pace and every basic topic thoroughly explained.

[@Fernando-du5uj]

Best explanation ever, thank you so much!

[@fmaransatto]

Simply awesome. Thank you Academind.

[@fmaransatto]

@Academind, if you can, check my youtube channel here, I've replicated in portugueses one of the courses that I learned here (building a rest api with node.js), but I've used mysql instead of mongoDB.

[@dtmylim2661]

man you explain this way better than my lecturer!

[@nzjemountfort]

Finally - a clearly understood explanation of this - Thanks!

[@academind]

Thank you very much Jonathan, really happy to read that you liked my explanation!

[@the_southlander475]

these guys are amazing. always a pleasure learning from them

[@rubialalom]

Thank you Manu you are by far the best teacher.

[@academind]

Thank you so much Rubel!

[@matthewyoung4191]

This video gave a great understanding of how to do this thank you so much.

[@liamik9986]

Best explanation of align-items and justify-items!!! thank u very much!!!!!

[@academind]

Thank you very much Lia :)

[@MrIndependent99]

you are awesome.. I finally understood flex box.

[@wolfezhao840]

I can't thank you more, dude. You helped me so much!

[@viniciusdemorais7327]

wtf how good it is tks for this, I've seen several others tutorials and I'm pretty sure that this is the best.

[@academind]

That's simply fantastic to read Vinicius, thanks a lot!

[@lizdejesus5578]

Very nice and clear explanations.

[@TheD2D21]

Ah! Totally makes sense why the main and the cross are named such and why they switch! Thanks for that.

[@academind]

Happy to read that Jorge thanks a lot for your comment!

[@shubhamujjwal328]

great teaching. thanks 😃 you made that easy to understand.✌

[@diegoquadra6546]

awesome video, so clear, calm and with a lot of example. Love it!

[@academind]

Glad you enjoyed it, thank you!

[@michalk2072]

Thanks for the tutotrial! It is very informative. And this flexbox is really awesome, it makes things much easier!

[@harshaniedirisinghe6413]

Explained very well. Thank you so much !

[@beatsarfa5407]

Finally I can understand flexbox, thank you very much...

[@Ditdee]

Outstanding video, Thank you!

[@chinmayachowdary]

Best tutorial. Thank you.

[@abbyck]

Hoping that you people will reach 1M subs soon...

[@academind]

Still a long way to go but we are more than happy with the awesome support we get from you and many others :)

[@duducv]

Academind is Awsome! thank you for one more lesson.

[@academind]

YOU are awesome Eduardo, thanks a lot for your great feedback!

[@shvideo1]

Thank you for the very detailed explanation of the flex layout. You've done an excellent job of explaining the basics very clearly. Thank you for sharing your knowledge.

[@unniykom5393]

Awesome Job.. Great Explanation ... n the Last Explanation abut flxboX Thanku ...

[@MathinusG]

Thanks. The best clear logical explanation so far.

[@mladenkaorlic]

depending on flex direction, position of cross axis changes, and align items refers to cross axis

[@suduvanofficial2270]

freking useful and clean explain

[@EMR80]

I think I will buy your course it looks impressive and clearly explained.

[@academind]

Happy to read that, thank you! We tried our best to follow the same teaching style in the full course, would be great to have you on board :)

[@saydolimoff]

thank you very much it was the most helpfull video I have seen

[@reributan7240]

Thank you so much for such a wonder ful teaching.

[@madunasimon]

Hello welcome back... to this serious...

[@wasimsuperb]

Thanks for sharing such valuable tutorial.please guide when to use flex box and when to use grid and when to use other layout ..plz guide thanks

[@ericnguyen7462]

Thank you sir . Excellent 👍👍

[@user-zb5jp4ti1d]

Soo good... Manu and Max, you guys are giants... going for your CSS course on udemy shortly... thank you so much

[@academind]

Thanks a lot for your great feedback, this means a lot to both of us! Looking forward to welcome you on board of our CSS course :)

[@mahyabagherinezhad9313]

Thank you soooooooooooooooooooooooooo much that is a great introduction to the flex box..

[@nerdophile6945]

Best explanation Homie !! Now I can show off in my college

[@academind]

Happy to read that Venkat, thank you!

[@maskman4821]

does that mean float+clear, display~inline-block has phased out?

[@EMR80]

Not 100 percent phase out. But it's close to the end. In five more years I'm going to say totally dead. In terms of floats and clear era is done.

[@ozzyfromspace]

Incredible explanation, mate! I'm gonna take your Udemy course :) Comment: I wish the creators of Flexbox called align-items and justify-content easier property words like: main-align and cross-align. That would be a lot more intuitive. Lost opportunities, it seems.

[@academind]

Thanks so much for your awesome feedback and support, I hope that you will also like the full course :)

[@muhammadshoaib2528]

Great video. But at 19.12 column reverse example image cross arrow should go from right to left.

[@karunsekhar2874]

best responsive design explanation this video tq sir

[@academind]

Thank you Kuran!

[@Freebird1122]

Thanks for the video! Great explanation, easy to understand.

[@academind]

Thank you :)

[@zuyah287]

sooooo clear! best explanations of the flex eveeeer!

[@academind]

Thank you very very much for your great feedback Zuya, so happy to read that :)

[@samirvaliyev]

The best lesson I have ever seen

[@bpittenssligro1848]

Great thanks, like always from Acamind, again very good video.

[@academind]

Thank you so much for your awesome feedback!

[@rushabhmehta9458]

This is a ridiculously good video!!!

[@piyushbelwe3662]

You got a new subscriber

[@praveenrajsr2112]

This is an AWESOME explanation! Thank you!

[@academind]

Wow, thank you so much for your amazing feedback Praveenraj! This really makes me happy :)

[@saydolimoff]

It would be gret if you continue teaching other css tutorials like grid bootstrap sass javascript ect..

[@neosabiit]

Great Video...Real example in editor is awsome

[@academind]

This really means a lot to me, thank you so much!

[@DecentralEyes]

Is there any advantage to coding this way or using Bootstrap 4 (which uses flexbox behind it's grid system) ?

[@abdulkadirbingol584]

Thanks for great lesson. I think if you used different border color for divs, it would be better.

[@zkhan1995]

best explaination ever!!

[@AlbertEinstein-um3vq]

Thanks a lot for your job! Well done Sir!

[@academind]

Thanks a lot Albert, happy to read that :)

[@taariqq]

32:48 in v4.5 "align-content: flex-start" behavior seems to have changed.

[@Cluedinage]

Great presentation. Shouldn't the second syllable be stressed, though, when pronouncing "entire"? And were you saying "series" instead of "serious"? Please keep up the good work.

[@abbyck]

Thanks Academind 💖

[@Omkar3324]

I think inorder to activate column /column reverse wraps cross function we gotta drag the browser screen to respond from its lower or upper boundary.

[@andriy1229]

Awesome tutorial! Really cool!

[@academind]

Thanks so much Andrey, just great to read that you like it!

[@andriy1229]

I really liked how you explained the material. Complex things become easier to understand. Your video helped me a lot in understanding the basics of flexbox. Now I understand better how this works. After such a wonderful video, I just need to practice. Good luck to you and thank you for the excellent explanation of the basics of flexbox!

[@Tech_Enthusiast_001]

How relevant is FlexBox with the new and fresh Grid in mind? Is there any reason to use FlexBox over Grid?

[@academind]

In my opinion knowing (and using) both can be helpful depending on what you want to create on your site. Therefore, a video covering CSS Grid will come in the near future, I'll try to show the advantages/disadvantages it has when comparing it to Flexbox in this video.

[@Tech_Enthusiast_001]

That sounds like something ill be looking forward to. Personally just started doing some webdesign again (after 4 years of just java work) and GOD do i love having Grid now. It is amazing compared to the same work 4 years ago.

[@academind]

I totally agree, it really is a big improvement and makes working with CSS a lot easier.

[@Jel.Awesh.M]

A reason to use Flexbox over Grid is the compatibility, I think to implement in IE, you know.

[@lorapora]

They work together. You want to use both. example a container can be flexbox and one of it's children be grid or vice versa. By combining them you can achieve complex layouts which would be very easy to manage.

[@yingliu7864]

crystal clear. thank you very much.

[@academind]

So cool to read that Ying, thanks a lot!

[@sugunum9258]

Excellent explanation..I was fighting to understand "flexbox" in the couple of weeks with your video I am on "peace"..best

[@junka3]

Nice video. It would be nice to have numbers as a content of the divs and different colors in order to have a bit more interaction with the class values. Nice slides

[@academind]

Thanks a lot for your feedback Sergio. Definitely something I'll keep in mind for the next videos :)

[@bhushi5764]

Hey, Very well explained!!! You guys are doing a great job. I have a question, does this supports IE 11?

[@academind]

Really great to read that, thanks a lot for your feedback! Flexbox is only partially supported by IE 11 at the moment, you can find out more about the known bugs right here: caniuse.com/#feat=flexbox

[@mladenkaorlic]

align items refers to position of items relating to cross axis!