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!

[@natashasimone1931]

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

[@divisorZero]

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

[@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.

[@taariqq]

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

[@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!

[@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 :)

[@justsomeguy2759]

Finally, someone who can actually explain Flexbox properly

[@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 !

[@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 :)

[@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!

[@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

[@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 ;) :)

[@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 :)

[@tg-shyam2887]

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

[@angelamiller4740]

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

[@mohmmadqudah2331]

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

[@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.

[@rukaiyakhan2406]

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

[@pilatec]

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

[@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!

[@auxreves4957]

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

[@samueltorres2485]

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

[@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.

[@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!

[@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.

[@solivagant1170]

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

[@dtmylim2661]

man you explain this way better than my lecturer!

[@preethirmani]

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

[@michal2135]

the finest flexbox explanation !

[@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.

[@damienhackney6499]

First class tuition! Thank you.

[@nzjemountfort]

Finally - a clearly understood explanation of this - Thanks!

[@academind]

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

[@iamreg1965]

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

[@diegoquadra6546]

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

[@academind]

Glad you enjoyed it, thank you!

[@loze]

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

[@rubialalom]

Thank you Manu you are by far the best teacher.

[@academind]

Thank you so much Rubel!

[@thehungrywolfes]

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!

[@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!

[@matthewyoung4191]

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

[@the_southlander475]

these guys are amazing. always a pleasure learning from them

[@MrIndependent99]

you are awesome.. I finally understood flex box.

[@punithm7480]

Sir Amazing Explanation cleared all my doubts thank you

[@shubhamujjwal328]

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

[@liamik9986]

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

[@academind]

Thank you very much Lia :)

[@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 :)

[@michalk2072]

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

[@duducv]

Academind is Awsome! thank you for one more lesson.

[@academind]

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

[@lizdejesus5578]

Very nice and clear explanations.

[@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 :)

[@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!

[@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 :)

[@nerdophile6945]

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

[@academind]

Happy to read that Venkat, thank you!

[@harshaniedirisinghe6413]

Explained very well. Thank you so much !

[@Ditdee]

Outstanding video, Thank you!

[@Fernando-du5uj]

Best explanation ever, thank you so much!

[@mladenkaorlic]

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

[@madunasimon]

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

[@suduvanofficial2270]

freking useful and clean explain

[@unniykom5393]

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

[@saydolimoff]

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

[@bpittenssligro1848]

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

[@academind]

Thank you so much for your awesome feedback!

[@ericnguyen7462]

Thank you sir . Excellent 👍👍

[@taariqq]

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

[@Freebird1122]

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

[@academind]

Thank you :)

[@karunsekhar2874]

best responsive design explanation this video tq sir

[@academind]

Thank you Kuran!

[@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 :)

[@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.

[@chinmayachowdary]

Best tutorial. Thank you.

[@beatsarfa5407]

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

[@piyushbelwe3662]

You got a new subscriber

[@rushabhmehta9458]

This is a ridiculously good video!!!

[@reributan7240]

Thank you so much for such a wonder ful teaching.

[@mahyabagherinezhad9313]

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

[@neosabiit]

Great Video...Real example in editor is awsome

[@academind]

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

[@fun2badult]

@32:35 when you have align-content: space-between and you're stretching the window out, the contents go to the center. However, when I have space-between, the contents stay on top. Any reasons why? The code is the same :(

[@praveenrajsr2112]

This is an AWESOME explanation! Thank you!

[@academind]

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

[@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

[@AlbertEinstein-um3vq]

Thanks a lot for your job! Well done Sir!

[@academind]

Thanks a lot Albert, happy to read that :)

[@MathinusG]

Thanks. The best clear logical explanation so far.

[@DecentralEyes]

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

[@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 :)

[@samirvaliyev]

The best lesson I have ever seen

[@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!

[@saydolimoff]

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

[@sunilKumar-uu2cx]

after watching this flexbox box tutorial .. I am flexbox pro now

[@academind]

That's awesome to read Sunil, thank you for your comment!

[@abbyck]

Thanks Academind 💖

[@mladenkaorlic]

align-content, items in more than one line, cross axis

[@mladenkaorlic]

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

[@zkhan1995]

best explaination ever!!

[@muhammadshoaib2528]

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

[@gorantrajkovic2071]

Good one tutorial.Thank you a lot.

[@academind]

Great to read that you liked it Goran, thank you for your comment!

[@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.

[@yingliu7864]

crystal clear. thank you very much.

[@academind]

So cool to read that Ying, thanks a lot!

[@mohamedbensalah7169]

Hey man, why you don't do as often videos as max, your methodology is great too, let's hope to see you with some backend stuff with laravel for example

[@academind]

Thank you Mohamed! I'm often busy with other things behind the scenes, but we actually plan to release more content also done by me this year so we'll see :)

[@mohamedbensalah7169]

@@academind That's great Manuel, I wish you success on your upcoming projects.

[@erfelipe]

Ótima aula.

[@goczbela8469]

thx men! its a great tut!

[@academind]

Happy to read that Gócz, thank you!