Тёмный

Learn Flexbox CSS in 8 minutes 

Slaying The Dragon
Подписаться 100 тыс.
Просмотров 1,3 млн
50% 1

🚨🚨🚨 COURSES - slayingthedragon.io 🚨🚨🚨
Discord - / discord
Codepen for this project - codepen.io/ramzibach-the-styl...
Blog post - slayingthedragon.notion.site/...
During the CSS stone-age developers were creating layouts with floats and positioning until one fateful day Flexbox would be introduced and the world would never be the same.
0:00 Intro
0:11 display flex
0:39 flex-direction
1:05 justify-content
1:41 align-items
2:22 key concept
3:12 flex-wrap
3:36 align-content
4:08 gap
4:20 flex-grow
5:19 flex-shrink
5:44 flex-basis
6:14 flex shorthand
6:43 align-self
7:17 order

Наука

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

 

3 май 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 1,1 тыс.   
@slayingthedragon
@slayingthedragon 7 месяцев назад
🚨🚨🚨 New CSS Course - slayingthedragon.io 🚨🚨🚨
@smaransure2234
@smaransure2234 3 месяца назад
How old are you
@LILAMENE
@LILAMENE 3 месяца назад
😂😂​@@smaransure2234
@willempienaar
@willempienaar 3 месяца назад
I would have watched your video if not for the retro effect. It is irritating.
@Filaxsan
@Filaxsan 25 дней назад
Oustanding! Looking fw your other courses as well!
@fartlander
@fartlander Год назад
This is what high value content looks like. Crystal clear, concise and to the point. Much appreciated.
@slayingthedragon
@slayingthedragon Год назад
Thank you ❤❤
@ishwarsukheja
@ishwarsukheja 8 месяцев назад
Completely 💯 Agree
@sdbadik
@sdbadik 5 месяцев назад
I completely agree with you, @fartlander
@irun_mon
@irun_mon Год назад
this is so much better than spending a whole day reading flex box in w3school, I'm a visual learner so this helps a lot
@slayingthedragon
@slayingthedragon Год назад
I'm glad this helped 😁
@finyx
@finyx Год назад
Same bro😑 plus, he also give out plenty of tips. I'm glad I came across his channel.
@shortislife6627
@shortislife6627 Год назад
Dont use w3, better use mdn
@Troyzhen
@Troyzhen Год назад
Same!
@psy237
@psy237 Год назад
u people are no visual learners, you're just lazy... there's a difference ;) but keep up the excuses, we're a society made of excuses, so you'll need it
@utkarshmayur6344
@utkarshmayur6344 Год назад
I had skipped flexbox and moved onto learning JS; after watching this I realise how much of a peasant I was. Your channel is insane, keep the good work up!
@slayingthedragon
@slayingthedragon Год назад
Haha I love it, thank you so much !
@raidgamer3537
@raidgamer3537 Год назад
Omg i did the same thing 😅
@ShineeM3
@ShineeM3 Год назад
Me too, i Just learnt it 😂
@iamaryasharma
@iamaryasharma Год назад
😂🤣
@vladrileynavilys
@vladrileynavilys Год назад
You peasant!
@bamas_1357
@bamas_1357 17 дней назад
Our school teacher showed us this video in class, now I am coming back because we have an test on this topic tomorrow :)
@hex_1733
@hex_1733 Год назад
Beginner in CSS here, I understood how flexbox worked and the properties before, but I just couldn't wrap my head around it when it came to actually using it. This is a really clean refresher, I'll save it to watch when I get confused with flexbox again haha.
@mailsiraj
@mailsiraj 10 месяцев назад
This is the 3rd video I am watching and I am very impressed with how much you convey in such a short time. For the first time, I understand the difference between align-items vs align-content. Your explanation of baseline and align-self were very helpful as I could not understand them after doing other tutorials. Thank you so much.
@UndeadSasuke34
@UndeadSasuke34 11 месяцев назад
Even though I have worked as a fullstack dev for a couple of years, I never really fully understood the baseline and the align-content, even after research. It's totally absurd how you explained them in a matter of seconds at such high quality. At my company I am responsible for providing frontend learning materials for the interns every year, and this video together with others and for sure a lot of videos you will put out in the future will be the new learning material for the interns, and as well for seasoned developers, as I am spreading the word of your channel through my company and to my friends.
@slayingthedragon
@slayingthedragon 11 месяцев назад
Wow thank you so much ❤️❤️❤️❤️❤️
@TheOceangirl28
@TheOceangirl28 3 месяца назад
which is yyrrurr company
@tamarasurnina_renovation
@tamarasurnina_renovation Год назад
Thank you so much! your short video helped me understand the topic, that i've studied in IT school for 2 months and still couldn't wrap my head around it, until now! and all in 8 minutes! Brilliant!
@buzzardb
@buzzardb Год назад
I learned everything back in the float era and have been trying to catch up with the times. This is by far the most clear and concise flexbox tutorial ive watched yet.
@geovaniraffaelli4508
@geovaniraffaelli4508 Год назад
For someone who previously wrote css with float learning flexbox is like the best day ever
@recep36
@recep36 Год назад
Thank you so much! I'm currently learning CSS and you've put so much content into just 8 minutes. Incredible!
@dennylekstrom4517
@dennylekstrom4517 Год назад
Just started out with my html and css learningprocess and this is the first video that has given me an intuitive grasp on how to visualize the different elements and how to manipulate them. I really appreciate the no-personal-opinion and non-bias, just straight facts. In short, not so much about you, but the topic at hand. Fantastic content and approach. Much thanks! New subscriber for sure! 😁
@mdfarooq97
@mdfarooq97 Год назад
Truly amazing explanation, I was always overwhelmed with information on flex, but nothing was as clear as this. This has made flex so easy to understand that can be practically implemented in any real-world scenario. Great job!
@martinkobimbo8090
@martinkobimbo8090 Год назад
Took a whole day reading about flexbox on various sites and couldn't piece together what was happening, you just explained everything I covered and made me understand everything in 8 minutes 😮. You are the best ❤
@Channel-zo1zp
@Channel-zo1zp Год назад
Great explanation. I was totally confused about this and was using the stone-age properties.. i feel confident now
@Maeriii
@Maeriii 11 месяцев назад
Man , your channel came into my recommended like an angel. I have exam Web Development in 3 weeks and so far I been struggling understanding positioning, css grid, etc. Bless you , these tutorials are amazing. I hope to see more videos and tutorials from you! Maybe also lil projects to do!
@Alexander_Haplington
@Alexander_Haplington Месяц назад
Thank you so much! Up to this point I was always confused by flexbox layout and never understood what all those articles were talking about. This was crystal clear for me!
@stea27
@stea27 Год назад
All I can say is you nailed it again. In a few minutes you showed the whole thing, with clear instructions. You're doing a much better and useful presentation than most of paid courses and materials.
@slayingthedragon
@slayingthedragon Год назад
Thank you so much ❤❤❤
@AchyutJagini
@AchyutJagini Год назад
can u share the code of styles.css
@anton9410
@anton9410 Год назад
pretty good refresher, keeping the viewer engaged with actual info that flows from one point to another. Keep at it mate!
@slayingthedragon
@slayingthedragon Год назад
Thank you 🙂
@yasithsamarawickrama1683
@yasithsamarawickrama1683 8 месяцев назад
this was the best flexbox tutorial that i've ever seen, no rubbish, just straight to the point. nice work brother.
@lekhasri308
@lekhasri308 8 месяцев назад
This is the best channel for learning css i have ever came across which is time-saving and super understanding. keep going on !
@asaduzzamansunam9845
@asaduzzamansunam9845 Год назад
The way you described how one property unlocks other properties (eg: flex-wrap:wrap; unlocks align-content) just blew my mind. The way you divided flex properties into container and item properties, that was brilliant. Thanks for the clear-cut video. I will recommend your video to my other friends.
@slayingthedragon
@slayingthedragon Год назад
Holy, I really appreciated reading that, thank you so much 😁
@jamesfranchino
@jamesfranchino Год назад
Such a good explanation. Simple and no waste of time. A true professional!
@dopehr
@dopehr 8 месяцев назад
Despite being brief and quick, his tutorials are pretty detailed and cover anything you need to know. This is what a developer needs. keep it up 👍
@SnakesRaven
@SnakesRaven 3 месяца назад
Well explained, to the point, no fluff... First tutorial I watch of this channel and I"m already impressed. Good job man!
@Jakobokun
@Jakobokun Год назад
This is gold! Been struggling to wrap my head around flexbox but this really helped me to understand it better! Subscribed :)
@slayingthedragon
@slayingthedragon Год назад
I'm glad I could help ! Thank you ☺️
@rookie6496
@rookie6496 Год назад
Sick summary! Loved it, I have always needed align-self, but didn't know it existed. Deserves waaay more views.
@slayingthedragon
@slayingthedragon Год назад
Thank you ☺️
@alxbenjamin
@alxbenjamin 3 месяца назад
No fluff, just straight to the point. We need more tutorials like this.
@d0ve-
@d0ve- 6 месяцев назад
honestly thank you so much for this! this was so helpful and i love the way you explain things simply yet effectively. i can't believe you've offered this for free!!
@abhavyaverma5101
@abhavyaverma5101 Год назад
This is what I was looking for. Direct and simple explanation. Great Work 😄
@slayingthedragon
@slayingthedragon Год назад
Thank you 😊😊❤❤❤
@RikThePixel
@RikThePixel Год назад
I really am liking this kindof analytical format. This guy has nice visuals paired with a pretty streamlined explanation!
@slayingthedragon
@slayingthedragon Год назад
Thank you very much ☺️
@gregou9885
@gregou9885 Год назад
Short, straight to the point and still exhautive. Great content, well done and thank you
@shuylife
@shuylife 6 месяцев назад
I'm doing the Mimo course and certain parts of this didn't really land, particularly the align-items vs align content but this video seriously helped to fill in the gaps. Super concise and now I feel have a much better grasp of flexbox. Thank you!
@nemeziz_prime
@nemeziz_prime Год назад
I cannot express in words how brilliant this tutorial is 👏🏻👌🏻🔥
@slayingthedragon
@slayingthedragon Год назад
Thank you 😁
@djrmarketing598
@djrmarketing598 Год назад
I've been writing HTML since the early 90's (Mosiac days) and never understood the flex layout. Your video helped me understand this way better than I have ever understood. 100% recommended watch. Gone are the days of me trying to do margins and wrapper containers trying to center something horizontally or vertically!
@slayingthedragon
@slayingthedragon Год назад
I'm really happy to read this ☺️, much love ❤️❤️
@nathanlecam941
@nathanlecam941 Год назад
I went on 5 hours of research to understand flexbox, I didn't understand much and I just watched your video and that's it I understood! Thank you, it's clear and easy, no complicated terms and the explanation of the axis change a lot of thing!
@bhavikyadav2934
@bhavikyadav2934 Год назад
thankyou so much man , your explanations are just amazing, watched your grid and flex box videos and understood both the concepts very clearly, subbed forever
@afterthelasttime
@afterthelasttime Год назад
Your videos are super informative and concise. I wish you’d make one on everything code related, they really get the point across. I can tell you’re working on it so here’s to many more. 👍
@slayingthedragon
@slayingthedragon Год назад
Much love ❤️❤️
@Blackoutfor10days
@Blackoutfor10days Год назад
There's a huge demand of teachers like you 😊
@Imjustabagel
@Imjustabagel Год назад
Great video! Straight into it, without any bs. Very well explained, thanks a lot! I’ll be coming back to this video often
@kevingleeson
@kevingleeson Год назад
Best explanation of these concepts. I had difficulty learning them as presented in another class. Thank you so much for putting this up for the world!
@gt8846
@gt8846 Год назад
Thank you bro, your teaching is so easy to understand.
@miajowayuyu7273
@miajowayuyu7273 11 месяцев назад
love how the most watched moment is where he shows the base styles he said we should "ignore"
@InspiredScience
@InspiredScience Год назад
Thank you for such a clear, straightforward review that is considerate of the viewer's time. Plus, the *Codepen* link is extremely helpful -- *excellent video!*
@person81045
@person81045 11 месяцев назад
Brooooo. This is a BANGER video. No bs. Just straight to the heart. I love it. Subbed.
@thiscris_
@thiscris_ Год назад
As a senior developer with over 12 years of experience I can say that you are amazing at explaining. I enjoyed this quick refresh. Keep it up!
@shanoof
@shanoof 5 месяцев назад
where are from?
@iMagicGraalOnline
@iMagicGraalOnline Год назад
I would love to see something like this for grid. So much content very well explained in very little time. Awesome content!
@slayingthedragon
@slayingthedragon Год назад
I have one for grid :p
@HocineKamikaz
@HocineKamikaz Год назад
@@slayingthedragon is it out yet? If yes we need the link and thanks that explanation is gold!
@slayingthedragon
@slayingthedragon Год назад
@@HocineKamikaz ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-EiNiSFIPIQE.html 😊
@HocineKamikaz
@HocineKamikaz Год назад
@@slayingthedragonmy duuuude...!! Thankssss a million time❤️
@vojinkarisik1554
@vojinkarisik1554 Год назад
Brother, this is the best tutorial I have ever seen. So simple and straight to the point. Thank you very much, you helped me A LOT!
@sayanmanna2511
@sayanmanna2511 7 месяцев назад
Bro it is so well explained in such a short time. No bs, pure content.. 🔥
@rayeesdot310
@rayeesdot310 2 месяца назад
flex-direction : column ; changes the axis is the best point
@pnrgenc
@pnrgenc 8 месяцев назад
This is definitely best and cleanest explanation of the flexbox ever. Thank you, this is really great! 🌟
@wizpig64
@wizpig64 Год назад
A great explanation of the controls and their defaults. Thank you!
@SuperDarmino
@SuperDarmino Год назад
What if you put flex-grow: 0.9; or 0.8; ? So the 1 or the 0.9 just basically equates to a percentage where 1 means 100% of the space left and 0.9 means 90% etc.? Btw your explanation is really straight to the point and it makes it even easier to comprehend with the added graphics
@slayingthedragon
@slayingthedragon Год назад
Yes that's exactly how that works, 0.9 or any other number here is a unitless value that represents a fractional value of the remaining space available. I see now though that perhaps I could have explained that part better. I'll pin this comment so that others can see. Thank you ☺!
@SuperDarmino
@SuperDarmino Год назад
@@slayingthedragon Thank you mate. Looking forward to you future tutorials
@fizzinsoda
@fizzinsoda Год назад
you didn't do the gap: idk if it was out yet or not, but using gap: 5%; or whatever num you wanna use is pretty nice
@slayingthedragon
@slayingthedragon Год назад
@@fizzinsoda I did, 4:09 😋
@123arskas
@123arskas 11 месяцев назад
Please make such concise videos for: 1- Bootstrap 2- Tailwind 3- React 4-MongoDB
@Katzilla-1
@Katzilla-1 3 месяца назад
This is such a great explanation without overcomplicating anything. I feel like I finally understand flexbox a little more :D Thank you for your video!!
@johnanthonyprado1938
@johnanthonyprado1938 6 месяцев назад
Absolute content, very informative and straightforward. definitely saved me a whole day to learn basics of flex box in few minutes. Thank you and subscribing.
@lebersa
@lebersa Год назад
Fast, simple and straight to the point. Is it possible doing a tutorial about grid? Thanks from Brazil!
@slayingthedragon
@slayingthedragon Год назад
Thanks! Yea actually already working on the grid video should be out Monday !
@sanketpatil8682
@sanketpatil8682 Год назад
Bro can you make CSS web development course and put it in RU-vid 🙏👌
@slayingthedragon
@slayingthedragon Год назад
I might do that yes 🙂
@wh1mZ
@wh1mZ Год назад
Damn bro, I've watched alot of flex css tuts and they were even long af, this is the only video that gave me enlightenment and how to really use it. Thanks man!
@sebastiangonzales46
@sebastiangonzales46 Год назад
Thank you very much!! Glad I found your channel and I feel like this channel is gonna blow up, the quality is great 🙌
@something_OfEverything
@something_OfEverything Год назад
Im so happy that i found your channel, very clear explanation, thank you for that, keep it up !
@junaidsindhu499
@junaidsindhu499 Год назад
Straight forward,no time waste,Appreciate your work. Cover all important items of flex .
@briholland
@briholland Месяц назад
That was very well explained. Looking forward to more. Thank you!
@KelseyOKelley
@KelseyOKelley Год назад
Explained very well and concise. I appreciate you taking the time to make this video, it helped me a lot. Thanks!
@hassanmoechtar
@hassanmoechtar 10 месяцев назад
Great video! I'm doing a Front-End Development course from home and this clarifieda few things for me, that the course did not cover. Thanks and keep up the good work!
@gauthamnookala1776
@gauthamnookala1776 Год назад
Fantastic video! The align-content was an eye opener for me-- almost like the missing manual for what I was trying to do before watching this.
@kurtthorsten4463
@kurtthorsten4463 Год назад
bro, simple and to the point. great video, thank you
@eyewas9245
@eyewas9245 11 месяцев назад
Truly amazing video. This is the best most clear and concise video on the topic I've seen.
@antoniobrandao1642
@antoniobrandao1642 7 месяцев назад
You just made me learn a concept in 8 minutes that would probably take an entire hour. Awesome video!
@nnejiben
@nnejiben 2 месяца назад
Awesome video! Searching for a short tutorial on CSS Flexbox and this is the best I've seen so far.
@jeromealtariba7339
@jeromealtariba7339 Год назад
probably the best video on this topic I even seen. Thks a lot, this is a great explanation, simple and easy to remember
@Wangaruro
@Wangaruro Год назад
Literally the best Flexbox tutorial I have seen!!! I've learnt so much in 8 minutes.
@erickchavez4551
@erickchavez4551 Год назад
The visuals you include make everything much easier to understand. 10 out of 10!
@bp-ob8ic
@bp-ob8ic Год назад
Great review. For practice, I applied the topics to a generic practice page as I followed along. Really anchored some things I hadn't looked at in a while.
@SnapshotsOfHistory1
@SnapshotsOfHistory1 3 месяца назад
No intro bullshit and circling around the topic. I have understood every single point. Thanks man!
@onepiecetcgmemes
@onepiecetcgmemes Год назад
I just learned this and had a simple understanding of this. You clarified it way more for me. thank you!
@jordangray7208
@jordangray7208 8 месяцев назад
Great video! Helped me so much to understand flexbox it's crazy, about to try to use it myself now. Thank you!
@Chopitupwithme
@Chopitupwithme 8 месяцев назад
You conveyed this info effortlessly and effectively. Thanks!
@cjproductions5017
@cjproductions5017 6 месяцев назад
I was introduced to flexbox yesterday and I just could not get my head around it and was pulling my hair out. This video was so clear and has really helped me understand, so thank you very much!
@heckyes
@heckyes 11 месяцев назад
Straight to the point, no bull shit, and only one error. Well done. Best Flex tut on RU-vid.
@marvinsantos5998
@marvinsantos5998 Год назад
Never thought I could learn flex box this fast. Thanks bro. This is a time saver.
@mattvolpe1492
@mattvolpe1492 Год назад
That was amazing, you're great at doing these tutorials!
@kekuramusa
@kekuramusa 6 месяцев назад
This is an amazing guide. Had to brush up on flexbox and this video has saved me loads of time.
@ArpeggioPegasusMusic
@ArpeggioPegasusMusic 5 месяцев назад
This is incredibly helpful for classes, right now we're learning HTML and CSS, so of course we had to touch on the subject of Flexboxes since they're very useful, but I wasn't sure how to use them. Now I can confidently say I understood everything! Thank you so much.
@michaelcronk
@michaelcronk Год назад
This is honestly the best explanation I have heard! Thank you 👍🏽
@trendzonweb8016
@trendzonweb8016 6 месяцев назад
Man!! Your starting was too good!!! & content is apt... superb!! Love the way you explain..
@richardjonathan5117
@richardjonathan5117 Год назад
Your teaching is mind opening... I understand everything I found difficult before now with a miraculous ease
@sithumbuddika6295
@sithumbuddika6295 Год назад
I cannot express in words how brilliant , Short and Sweet this tutorial is 👏🏻👌🏻🔥 And ThankYou man !!!!
@Jrizy.
@Jrizy. 10 месяцев назад
Your videos are incredible man! Very informative, well said and spoken and just overall making things easy to understand! Greatly appreciated1 Please keep videos coming, I have a feeling that you are going to make it big on RU-vid if you continue to upload such powerful videos in the category of coding! Thank you! 💙
@merkgonzalez
@merkgonzalez Год назад
This is exactly what I needed for my project! Thanks a lot sir❤
@AZyzk
@AZyzk 8 месяцев назад
Thank you! I was able to solve things my teacher hadn't explained and you were very clear and on point.
@pajalixd4016
@pajalixd4016 2 месяца назад
Thank you so much ! I couldn't understand how the positioning of flexbox works but now thanks to you, I finally understand ! Keep doing this amazing work ! Have a wonderful and beautiful day !
@viktorkharkiff885
@viktorkharkiff885 Год назад
The best short discription about flex, thanks! Now a have a link to send it to someone )
@Charlito33
@Charlito33 Год назад
I never tried to use flexbox, but now, I see how it's so useful ! Thanks you a lot !
@jonathanvazquez1737
@jonathanvazquez1737 Год назад
literally the best explanation of flexbox I've ever seen (and I watched quite a bit lol) thanks a lot. Helped so much
@shiftfilms
@shiftfilms 2 месяца назад
Thanks for putting this together; I wrote the 8-minute video for reference. Being new, this really helped. I am looking forward to more of your videos.
@brayannkouam9097
@brayannkouam9097 Год назад
This is the best flexbox tutorial ever. You just saved me. Keep up champ you deserve great
@tcg2717
@tcg2717 Год назад
Succinctly explained without too much unnecessary fluff. Earned a sub.
@ce4083
@ce4083 Год назад
The best flexbox tutorial 🔥🔥🔥 Thank you so muchhhh
@zeeM164
@zeeM164 Год назад
The best tutorial on flexbox, thanks for getting straight to the point!!!
Далее
Learn CSS BOX MODEL - With Real World Examples
17:45
Просмотров 70 тыс.
HTML Tutorial for Beginners: HTML Crash Course
1:09:34
EEEEEEW 🤢🤢🤢
00:57
Просмотров 2,1 млн
That One Racoon Be Like:
00:12
Просмотров 1,8 млн
Learn CSS Grid - A 13 Minute Deep Dive
13:35
Просмотров 424 тыс.
Flexbox design patterns you can use in your projects
15:33
Every CSS Animation property
9:26
Просмотров 37 тыс.
Learn CSS Subgrid in 14 minutes
14:19
Просмотров 1,7 тыс.
Learn JavaScript With This ONE Project!
1:10:26
Просмотров 613 тыс.
Learn flexbox the easy way
34:04
Просмотров 666 тыс.
Learn Flexbox in 15 Minutes
15:12
Просмотров 1,1 млн
Flexbox Crash Course 2024
46:54
Просмотров 410 тыс.
Infrared Soldering Iron from Cigarette Lighter
0:58
Просмотров 1,9 млн