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

Подписаться 911 тыс.

Просмотров 174 тыс.

50% 1

Responsive design is more important than ever as we want to ensure that our website looks awesome on all devices. With Flexbox we can make our Elements more dynamic, so let's find out how this works in this tutorial!
----------
Join the full 22h+ course: acad.link/css
Source Code: github.com/academind/understa...
Flexbox on the MDN: developer.mozilla.org/en-US/d...
----------
• You can follow Max on Twitter (@maxedapps).
• You can also find us on Facebook.( / academindchannel )
• Or visit our Website (www.academind.com) and subscribe to our newsletter!
See you in the videos!
----------
Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!

Наука

Опубликовано:

8 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 202

@SajeelBongale 4 года назад

"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. ;)

@divisorZero 2 года назад

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

@jakubrpawlowski 6 лет назад

This is hands down the best explanation of flexbox on RU-vid. Great job Manu!

@academind 6 лет назад

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

@svendbentjensen5512 4 года назад

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

@taariqq 3 года назад

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

@natashasimone1931 3 года назад

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

@petermckinnon386 2 года назад

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 RU-vid. Thank you so much.

@taariqq 4 года назад

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

@justsomeguy2759 4 года назад

Finally, someone who can actually explain Flexbox properly

@tg-shyam2887 Год назад

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

@cerealrakist7360 3 года назад

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 !

@angelamiller4740 4 года назад

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

@deepeebee62 4 года назад

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 4 года назад

Great to hear, thank you!

@rukaiyakhan2406 4 года назад

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

@giorgiobarone9784 5 лет назад

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 5 лет назад

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

@bassam.2023 2 года назад

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 5 лет назад

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 5 лет назад

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

@AhmedMkhinini 3 года назад

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

@t.l.e.e. 2 года назад

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.

@sarahbebe5022 2 года назад

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.

@MatterLabz 5 лет назад

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 5 лет назад

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

@nzjemountfort 6 лет назад

Finally - a clearly understood explanation of this - Thanks!

@academind 6 лет назад

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

@iamreg1965 4 года назад

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

@mohmmadqudah2331 3 года назад

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

@Darragh1 3 года назад

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

@michalk2072 4 года назад

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

@the_southlander475 3 года назад

these guys are amazing. always a pleasure learning from them

@auxreves4957 4 года назад

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

@robertw671 5 лет назад

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.

@loze 2 года назад

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

@pilatec 3 года назад

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

@samueltorres2485 3 года назад

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

@solivagant1170 2 года назад

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

@harshaniedirisinghe6413 3 года назад

Explained very well. Thank you so much !

@damienhackney6499 3 года назад

First class tuition! Thank you.

@matthewyoung4191 3 года назад

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

@michal2135 3 года назад

the finest flexbox explanation !

@preethirmani 2 года назад

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

@liamik9986 5 лет назад

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

@academind 5 лет назад

Thank you very much Lia :)

@diegoquadra6546 4 года назад

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

@academind 4 года назад

Glad you enjoyed it, thank you!

@mu7am2d 4 года назад

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 4 года назад

Awesome to read that Mohammed, thanks a lot!

@mu7am2d 4 года назад

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

@praveenrajsr2112 6 лет назад

This is an AWESOME explanation! Thank you!

@academind 6 лет назад

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

@wolfezhao840 2 года назад

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

@chinmayachowdary 4 года назад

Best tutorial. Thank you.

@lizdejesus5578 3 года назад

Very nice and clear explanations.

@Ditdee Год назад

Outstanding video, Thank you!

@emiliep1732 2 года назад

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!

@fmaransatto 3 года назад

Simply awesome. Thank you Academind.

@fmaransatto 3 года назад

@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 4 года назад

man you explain this way better than my lecturer!

@duducv 5 лет назад

Academind is Awsome! thank you for one more lesson.

@academind 5 лет назад

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

@Freebird1122 5 лет назад

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

@academind 5 лет назад

Thank you :)

@punithm7480 2 года назад

Sir Amazing Explanation cleared all my doubts thank you

@rubialalom 5 лет назад

Thank you Manu you are by far the best teacher.

@academind 5 лет назад

Thank you so much Rubel!

@shubhamujjwal328 2 года назад

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

@mahyabagherinezhad9313 4 года назад

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

@reributan7240 3 года назад

Thank you so much for such a wonder ful teaching.

@zuyah287 6 лет назад

sooooo clear! best explanations of the flex eveeeer!

@academind 6 лет назад

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

@Fernando-du5uj 5 лет назад

Best explanation ever, thank you so much!

@MrIndependent99 Год назад

you are awesome.. I finally understood flex box.

@ericnguyen7462 2 года назад

Thank you sir . Excellent 👍👍

@viniciusdemorais7327 5 лет назад

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 5 лет назад

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

@saydolimoff 3 года назад

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

@unniykom5393 4 года назад

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

@suduvanofficial2270 2 года назад

freking useful and clean explain

@neosabiit 5 лет назад

Great Video...Real example in editor is awsome

@academind 5 лет назад

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

@bpittenssligro1848 4 года назад

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

@academind 4 года назад

Thank you so much for your awesome feedback!

@nerdophile6945 5 лет назад

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

@academind 5 лет назад

Happy to read that Venkat, thank you!

@abbyck 4 года назад

Thanks Academind 💖

@rushabhmehta9458 4 года назад

This is a ridiculously good video!!!

@TheD2D21 5 лет назад

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

@academind 5 лет назад

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

@yingliu7864 6 лет назад

crystal clear. thank you very much.

@academind 6 лет назад

So cool to read that Ying, thanks a lot!

@EMR80 5 лет назад

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

@academind 5 лет назад

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

@AlbertEinstein-um3vq 5 лет назад

Thanks a lot for your job! Well done Sir!

@academind 5 лет назад

Thanks a lot Albert, happy to read that :)

@beatsarfa5407 4 года назад

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

@Saaad2 2 года назад

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!

@user-zb5jp4ti1d 5 лет назад

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

@academind 5 лет назад

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

@madunasimon 4 года назад

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

@zkhan1995 5 лет назад

best explaination ever!!

@apuff1594 Год назад

Thank you so much!!!!!!!!!!

@erfelipe 2 года назад

Ótima aula.

@andriy1229 5 лет назад

Awesome tutorial! Really cool!

@academind 5 лет назад

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

@andriy1229 5 лет назад

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!

@goczbela8469 5 лет назад

thx men! its a great tut!

@academind 5 лет назад

Happy to read that Gócz, thank you!

@piyushbelwe3662 3 года назад

You got a new subscriber

@gorantrajkovic2071 5 лет назад

Good one tutorial.Thank you a lot.

@academind 5 лет назад

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

@karunsekhar2874 4 года назад

best responsive design explanation this video tq sir

@academind 4 года назад

Thank you Kuran!

@MonsterGaming-se6fu 3 года назад

Thank you sir

@tedbobit2762 5 лет назад

Thanks very much bro !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

@sandip_bettereveryday 4 года назад

Crystal clear! Thank you!!

@wasimsuperb 4 года назад

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

@taariqq 4 года назад

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

@shvideo1 4 года назад

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.

@abbyck 4 года назад

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

@academind 4 года назад

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

@samirvaliyev 4 года назад

The best lesson I have ever seen

@DecentralEyes 5 лет назад

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

@Omkar3324 4 года назад

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.

@mladenkaorlic 2 года назад

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

@MathinusG 4 года назад

Thanks. The best clear logical explanation so far.

@harpreetsingh6802 5 лет назад

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 5 лет назад

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