Learn Flexbox In 20 Minutes | Learn HTML & CSS | Flexbox Tutorial
HTML-код
- Опубликовано: 8 фев 2025
- Check out my courses and become more creative!
developedbyed.com
Learn Flexbox In 20 Minutes | Learn HTML & CSS | Flexbox Tutorial
Today we are going to cover how to build modern responsive layouts using flexbox and all of its properties.
Going into 2019 flexbox will be the defacto way we build modern websites (also CSS grid). Since the browser support is above 95% and going up, I highly recommend you giving some time learning flexbox.
❤Become a patreon for exclusive videos and more!
/ dev_ed
Follow me on:
/ deved94
As a front-end developer your videos really helped me and I really wanna see more from you. Thanks ed
@@kamielbreyne7859 Take a look at traversy flex box in 20 min ,this is gold when compared to that.
@@kamielbreyne7859 I watched his tut before this and he didn't explained completely, but this guy nailed it
@@amongdoomers9464 yeah ikr
@@kamielbreyne7859 Brad Traversy WAS better, but now he's teaching too much at the same time. Makes it impossible to follow along. This video is way higher in educational quality for my sake.
@@kamielbreyne7859 dont advertise another channel on someone else channel, i
Hey Ed, here is Ed ^^
Your voice and your way to speak is so unbelievable calm and chill, its magic!
Thank you so much for your superb content.
By far, this is the best flexbox explanation I've seen! It doesn't go into unnecessary complications, explains everything very clearly, and most importantly, practical. Thank you for putting in the time and making this video!
Yes, a great video
Definitely the best one I've come across
Watching this in Nov 2020 and still extremely useful! Keep up the great work!
Will last much longer than expected I believe so
still helpful
Watching this march 2022. Still Flexbox is top 3 CSS technology to know :)
Happy holidays everyone! Excited for 2019!
Thanks.
Happy holidays ✌
Happy holidays , Excited for 2020
commenting in 2020, may the next year be better than this .
@@ResolveX11 true
Thank you Ed for everything. You helped me alot with understanding and learning react and now with css fundamentals. Sooooo many tutorials are on the net, but u are really fun to watch and even more importantly easy to follow and understand.
Yes, a good video
I cannot express my thanks enough! This concisely and easily made clear what days of searching frustration couldn't! I'm beyond grateful.
I wonder why would people dislike his videos.. Hey Ed your videos are not just one more course video, you are the only you-tuber who mixes teaching with fun. It is much entertaining and knowledgeable..
You are by far the best coding teacher on RUclips
I am more confident using Flexbox now, you are a great teacher!
It is 2020 and at an older age I need new skills, and I needed a teacher- not a presenter. You sir a true teacher. I hope by 2021 I know something to start my own shop. When your my age you have to, as no one wants us seniors. Thanks
thanks dude that was really useful and by the way you are such a nice person i can see it in your eyes may the most high bless you
Thank you so much for the lovely comment! I highly appreciate it.
thank you. This is the best explained video I've ever found on internet related to CSS,
actually you been one of my favorite tutorial resource in the web field in youtube .
easy way to describe the idea ,good sound and style in showing the point,but bad keyboard skills loool.
Your tutorials are better in quality than most courses sold in Udemy! Your way of describing things is superior and it has helped a lot in my studies in computer science.
Thank you very much for explaining in such a crisp and clear manner .I am confident now that I can work with flex-box in my web-sites.
This is the best video to understand CSS flexbox!! thanks for sharing this!
This is the channel that makes everything clear. Love it.
Thank you. Best tutorial so far on YT! You're the best! Love!!
Dev Ed, I've been playing with web site design now using Html and CSS but using some of the dreamweaver extensions provided by the Project 7 team. I really like what they do and have purchased quite a number of their extensions. After watching your initial free crash course in html and CSS I've no purchased the entire course as I was so impressed with how you explain how to combine html and CSS. I now understand a lot more of the coding that is supplied within the P7 CSS files and its given me the confidence to have a go at it myself and perhaps use fewer of the P7 extensions. Thankyou
Paul - Uk
Thank you so much...... this helped me a lot... Before I was not able to image how things are work
Every css learning person should take this course.it's very very useful for me.I understand it completely in 2nd time
Great explanation dev . You cleared all my doubts .
we all nerdy devs know very well that struggle when changing to a new keyboard. hahhaha cheers mate. Thanks for this tutorials!
Great tutorial. I can finally say I understand Flex Box thanks to you.
The most useful thing to know and understand in CSS. Thank you!
Bro your videos are gold !
today is the last date for 2020 and tomorrow is 2021 but still, useful :-), I have learned node express rest and now flex box, thank you for your help
Always smiling and laughing ..... Such a positive vibes from this channel 😌🕊️🏳️☮️😊
I like your humor way of teaching which makes me awake ;)
Excellent video to understand all these easily ... Thanks Ed!
such an amazing developer and teacher. Appreciate your efforts
Ed you are fantastic your videos are precise and to the point.
great video and love your way of explaining , thanks :)
Watching this video at the end of 2019😂. Wish I had found it earlier. Happy new year btw to you
Before the hell started
& I am watching this video at the end of 2020
Bad belated new year
I didn't even knew what Flexbox was. So suddenly this video pops up, and I was like "hmm, Flexbox..eh? Sounds important!..Let's see!" xD
btw, Thanks a lot this video, Explained wonderfully!
Thank you so much.
*Dev Ed* brother.
love watching your tutorials
Amazingly clear and fun. Thankyou,
17:00 flex default is :
flex: 0 1 auto;
just so newbies dont get confused. grow is off, shrink is 1
umm.... at 15:30 The box "One" is not 2 times bigger than box "Two".
The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items.
"One" box with "flex-grow : 2" will grow 2 times faster than "Two", not 2 times bigger.
stfu no one asked
@@enricomoriggia615 somehow 35 people gave this a like.
@@kjn5991 Yes I gave it a like too, but I'm pretty sure Dev Ed also knows this, but there was a language barrier and he simply left it to the viewers brain to comprehend what's happening
what do you mean - it will grow 2 times faster, doesnt make sense
@@kieran2347 It means that the box grows with 2 times faster rate, in other words, when you expand the screen view, the other box will grow faster than the other one.
simple understanding tutorial. Watching this video at the end of 2020.😅 Your tutorials are amazing. Thanks, DEV. Advance HAPPY SAFE NEW YEAR 2021. 😊
Your teaching is so clearly. Thk so much.
You videos are amazing 👍👍👍
Thank you. Your tutorial videos are more better than the documentation.
God Bless you Ed.. Thank you for this beautiful tutorial.. YOu are a Amazing.
I want to see more of your great content Dev Ed! awesome tutorials man! 👨🏻💻💯✔
Happy New Year, Love from India
bro u are king with ur keyboard :D
Thank you so much this help a lot
really well explained thank you
Not sure if a tutorial video or a physical comedy showcase. I lol'd hard!!!
Thank you man, i learn many thing with you
Thank You this gave me much clarity on flexboslx
Wonderfully done.
I enjoy your videos. Thank you ❤️❤️❤️
Wonderful video, thanks
Best Flexbox Lecture Ever
Thanks so much! This was really useful!
Great Tutorial Bro.....Love from India :)
Thanks now it is clear for me 👍
As always, great explanation and great tutorial!
very helpfull!
thank you so much dev
This was helpful. thanks
The most important things in flexbox is to master or at least to remember the change between main axis and cross axis when changing flex direction
Best flexbox tuts on youtube
Thanks a lot, Ed! The most interesting webdev content I've ever found! Keep being creative as you are now!
You're the god - Happy 2021 XD
Good job sir
this is golden my man
Man talk about a coincidence but the previous video I just watched from TechsquidTV had the same background music and it was also about flex box. So when the previous video ended autplay played this video and it was like a transition to this one. Anyways, nice video!
Nice way of teaching. Thank you!
Thx Ed, love your videos :)
Content flows Horizontally : Main Axis
Content flows Vertically : Cross Axis. Am I correct ? If so i understand Flexbox. Thank you Edwin :))))))))))))))))))))))))))))))))))))))))
Great video! whish I found this one 2 years ago.
Never before was that easy! Thanks
Great video....🔥🔥🔥
Btw is it possible to ask you show up us a whole webpage template using flexbox?
And yes, thank you a lot for your tutorials
Now I got it clear! Pura vida!
Thank you for this video! Saved me tons of time :)
Great tutorial, thanks Ed
Good explanation, thank you!
I love you Ed ❤️❤️
Simple and Good.
i love all your vids... thank you!!!
Thanks! keep it up , smiling .
Excellent, thanks!
Thanks Ed
EDIT: Once again THANKS A LOT MY GORGEOUS FRIEND
Very nice tutorial thanks,very well explained
Ed, greetings from Brazil. I want to thank you, i learned Flex Box Very easy with your vídeo. Keep going man!!
that's it Caio Baianor
Very Neat Explanation
very helpful! great teacher !
this video very helpful. thx man. u are great
Thanks a lot, it was very helpful.
Hey... Thank you so much ...love from india... 🙋
@@hkktr F
Thank you so much!!!
Hey
You explanations are just Awesome!!
bdw Which theme is that??
The way you talk makes css more interesting
good away of explaining and easy to understand thanks so much sir
actually the default for align items is not flex-start and its stretch and the reason in your code it shows like that is because you are using a px for your children's height and width but if you use percentage or viewpoint, flex-start for align-items will remove the extra space for any child.