"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
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 RUclips. Thank you so much.
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.
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 ;) :)
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!
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 !
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 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
@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 :(
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.
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.
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!
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 :)
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.
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.
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!
@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.
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.
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.
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.
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.
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.
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
"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
"justify-content" on the same breadth does the same along the main-axis. ;)
you can TEATCH, not just give information. Thank you for your explanations! I mean all you youtube and courses!
This is hands down the best explanation of flexbox on RUclips. Great job Manu!
It is so amazing to get such a rewarding feedback, thank you very very much Jakub :)
So you've seen ALL other videos on this subject? Every single one in the world?
@@svendbentjensen5512 a month on and if you were to re-read what you wrote, doesn't that sound kinda 'stupid' comment!
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 RUclips. Thank you so much.
I've spent about a week trying to understand Flex boxes I finally understand thanks to you! Thank you!! :-D
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.
Great to hear, thank you!
Finally, someone who can actually explain Flexbox properly
Most helpful thing about their teaching style, clear demarcation of ideas and listing the values used in them. Great tutorial!
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 ;) :)
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!
Thank you very very much for your fantastic feedback Giorgio, this really means a lot to me :)
if you don't understand flexbox after this, you will never understand it. best flexbox explanations ! GJ
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!
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 !
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!
Thanks a million for your awesome feedback Ken, it honestly makes me happy to read that the video was helpful for you :)
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!
Awesome to read that Mohammed, thanks a lot!
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
Thank you for adding Theory and explaining flexbox, not just "code what I am coding"
There are very few good flex-box tutorials on youtube and this is one them.
man never saw such a good explanation like this thanks a lot for such an excellelent video keep going
32:48 in v4.5 "align-content: flex-start" behavior seems to have changed.
You are the best CSS teacher I've encountered, sir. Thank you
you are the only person i understand flexbox with keep it up you are killing it :)
@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 :(
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.
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.
Thank you very very much for these nice words, happy to have you on board of the channel :)
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!
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 :)
Thanks a million for your awesome feedback Harpreet, it just fantastic to read that you like the video!
Best tutor so far!!! Explained so well. Thank you so much.
This was SO well done & SO easy to understand! THANK YOU!
Took me a bit but after thinking it over and some playing around, I get it! Thanks!
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.
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.
Thank you, I finally understand how align-item works now !!!!!!!!
depending on flex direction, position of cross axis changes, and align items refers to cross axis
Very nice explanation on Flex Box! Thanks a ton!!!
man you explain this way better than my lecturer!
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!
Is there any advantage to coding this way or using Bootstrap 4 (which uses flexbox behind it's grid system) ?
Sir Amazing Explanation cleared all my doubts thank you
Great video. But at 19.12 column reverse example image cross arrow should go from right to left.
Finally - a clearly understood explanation of this - Thanks!
Thank you very much Jonathan, really happy to read that you liked my explanation!
display:inline-flex;
elements keep the width
the finest flexbox explanation !
Excellent video on flexbox Max. Nice pace and every basic topic thoroughly explained.
great teaching. thanks 😃 you made that easy to understand.✌
does that mean float+clear, display~inline-block has phased out?
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.
First class tuition! Thank you.
Simply awesome. Thank you Academind.
@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.
Best explanation of align-items and justify-items!!! thank u very much!!!!!
Thank you very much Lia :)
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.
Do you have free online course about programing language?
align items refers to position of items relating to cross axis!
you are awesome.. I finally understood flex box.
How to make a text in center? Text is in upper(h=150px) bt how to make a text in center?
Thank you Manu you are by far the best teacher.
Thank you so much Rubel!
Hoping that you people will reach 1M subs soon...
Still a long way to go but we are more than happy with the awesome support we get from you and many others :)
Very nice and clear explanations.
How relevant is FlexBox with the new and fresh Grid in mind? Is there any reason to use FlexBox over Grid?
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.
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.
I totally agree, it really is a big improvement and makes working with CSS a lot easier.
A reason to use Flexbox over Grid is the compatibility, I think to implement in IE, you know.
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.
This video gave a great understanding of how to do this thank you so much.
wtf how good it is tks for this, I've seen several others tutorials and I'm pretty sure that this is the best.
That's simply fantastic to read Vinicius, thanks a lot!
Why does height changes when we apply wrap?
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
these guys are amazing. always a pleasure learning from them
awesome video, so clear, calm and with a lot of example. Love it!
Glad you enjoyed it, thank you!
Thank you sir . Excellent 👍👍
I can't thank you more, dude. You helped me so much!
Outstanding video, Thank you!
Ah! Totally makes sense why the main and the cross are named such and why they switch! Thanks for that.
Happy to read that Jorge thanks a lot for your comment!
please give us explain the grid css like this video
Thanks for the tutotrial! It is very informative. And this flexbox is really awesome, it makes things much easier!
freking useful and clean explain
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.
Academind is Awsome! thank you for one more lesson.
YOU are awesome Eduardo, thanks a lot for your great feedback!
It would be gret if you continue teaching other css tutorials like grid bootstrap sass javascript ect..
align-content, items in more than one line, cross axis
I think I will buy your course it looks impressive and clearly explained.
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 :)
thank you very much it was the most helpfull video I have seen
Finally I can understand flexbox, thank you very much...
Best explanation ever, thank you so much!
So, with this...the responsive can be done without bootstrap, right?
Ajay Arora ofc, You don’t need bootstrap
Soo good... Manu and Max, you guys are giants... going for your CSS course on udemy shortly... thank you so much
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 :)
Thanks for great lesson. I think if you used different border color for divs, it would be better.
Awesome Job.. Great Explanation ... n the Last Explanation abut flxboX
Thanku ...
Best explanation Homie !! Now I can show off in my college
Happy to read that Venkat, thank you!
Explained very well. Thank you so much !
best responsive design explanation this video tq sir
Thank you Kuran!
align-content, visible results when wrap is active
Thanks. The best clear logical explanation so far.
Hello welcome back... to this serious...
align-items //cross axis
justify-content //main axis
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.
Thanks so much for your awesome feedback and support, I hope that you will also like the full course :)
Best tutorial. Thank you.
You got a new subscriber
Thank you so much for such a wonder ful teaching.
Great thanks, like always from Acamind, again very good video.
Thank you so much for your awesome feedback!
Please, how can i get the second part of this video. Thanks
Of course, here is the next part: academind.com/learn/css/understanding-css/flexbox-flex-items
Thanks for the video! Great explanation, easy to understand.
Thank you :)
sooooo clear! best explanations of the flex eveeeer!
Thank you very very much for your great feedback Zuya, so happy to read that :)
Thank you soooooooooooooooooooooooooo much that is a great introduction to the flex box..
Hican I use it to reorder menu ?
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
Thanks a lot for your feedback Sergio. Definitely something I'll keep in mind for the next videos :)