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!

[@divisorZero]

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

[@taariqq]

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

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

[@natashasimone1931]

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

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

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

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

[@AhmedMkhinini]

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

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

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

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

[@auxreves4957]

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

[@pilatec]

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

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

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

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

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

[@taariqq]

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

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

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

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

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

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

[@solivagant1170]

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

[@loze]

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

[@mladenkaorlic]

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

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

[@dtmylim2661]

man you explain this way better than my lecturer!

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

[@DecentralEyes]

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

[@michal2135]

the finest flexbox explanation !

[@preethirmani]

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

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

[@Fernando-du5uj]

Best explanation ever, thank you so much!

[@nzjemountfort]

Finally - a clearly understood explanation of this - Thanks!

[@academind]

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

[@shubhamujjwal328]

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

[@beatsarfa5407]

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

[@MrIndependent99]

you are awesome.. I finally understood flex box.

[@rubialalom]

Thank you Manu you are by far the best teacher.

[@academind]

Thank you so much Rubel!

[@punithm7480]

Sir Amazing Explanation cleared all my doubts thank you

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

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

[@lizdejesus5578]

Very nice and clear explanations.

[@thehungrywolfes]

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

[@the_southlander475]

these guys are amazing. always a pleasure learning from them

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

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

[@Ditdee]

Outstanding video, Thank you!

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

[@muhammadshoaib2528]

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

[@ericnguyen7462]

Thank you sir . Excellent 👍👍

[@iamreg1965]

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

[@suduvanofficial2270]

freking useful and clean explain

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

[@chinmayachowdary]

Best tutorial. Thank you.

[@diegoquadra6546]

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

[@academind]

Glad you enjoyed it, thank you!

[@saydolimoff]

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

[@harshaniedirisinghe6413]

Explained very well. Thank you so much !

[@duducv]

Academind is Awsome! thank you for one more lesson.

[@academind]

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

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

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

[@madunasimon]

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

[@michalk2072]

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

[@karunsekhar2874]

best responsive design explanation this video tq sir

[@academind]

Thank you Kuran!

[@reributan7240]

Thank you so much for such a wonder ful teaching.

[@unniykom5393]

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

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

[@mahyabagherinezhad9313]

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

[@rushabhmehta9458]

This is a ridiculously good video!!!

[@MathinusG]

Thanks. The best clear logical explanation so far.

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

[@nerdophile6945]

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

[@academind]

Happy to read that Venkat, thank you!

[@piyushbelwe3662]

You got a new subscriber

[@selamteshome-vc8df]

Do you have free online course about programing language?

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

[@bpittenssligro1848]

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

[@academind]

Thank you so much for your awesome feedback!

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

[@samirvaliyev]

The best lesson I have ever seen

[@Freebird1122]

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

[@academind]

Thank you :)

[@mladenkaorlic]

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

[@abdulkadirbingol584]

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

[@keshavchauhan2465]

Why does height changes when we apply wrap?

[@taariqq]

19:49 take a screenshot!

[@neosabiit]

Great Video...Real example in editor is awsome

[@academind]

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

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

[@praveenrajsr2112]

This is an AWESOME explanation! Thank you!

[@academind]

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

[@ajayji1009]

So, with this...the responsive can be done without bootstrap, right?

[@blazej0598]

Ajay Arora ofc, You don’t need bootstrap

[@zkhan1995]

best explaination ever!!

[@mladenkaorlic]

display:inline-flex; elements keep the width

[@mladenkaorlic]

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

[@AlbertEinstein-um3vq]

Thanks a lot for your job! Well done Sir!

[@academind]

Thanks a lot Albert, happy to read that :)

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