Learn Flexbox CSS in 8 minutes

Ғылым және технология

🚨🚨🚨 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

Пікірлер: 1 100

  • @slayingthedragon
    @slayingthedragon7 ай бұрын

    🚨🚨🚨 New CSS Course - slayingthedragon.io 🚨🚨🚨

  • @smaransure2234

    @smaransure2234

    4 ай бұрын

    How old are you

  • @LILAMENE

    @LILAMENE

    4 ай бұрын

    😂😂​@@smaransure2234

  • @willempienaar

    @willempienaar

    3 ай бұрын

    I would have watched your video if not for the retro effect. It is irritating.

  • @Filaxsan

    @Filaxsan

    Ай бұрын

    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

    9 ай бұрын

    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!

  • @UndeadSasuke34
    @UndeadSasuke34 Жыл бұрын

    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

    Жыл бұрын

    Wow thank you so much ❤️❤️❤️❤️❤️

  • @TheOceangirl28

    @TheOceangirl28

    3 ай бұрын

    which is yyrrurr company

  • @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
    @mailsiraj10 ай бұрын

    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.

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

  • @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! 😁

  • @recep36
    @recep36 Жыл бұрын

    Thank you so much! I'm currently learning CSS and you've put so much content into just 8 minutes. Incredible!

  • @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 🙂

  • @Maeriii
    @Maeriii Жыл бұрын

    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!

  • @lekhasri308
    @lekhasri3089 ай бұрын

    This is the best channel for learning css i have ever came across which is time-saving and super understanding. keep going on !

  • @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 ❤

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

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

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

  • @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 ☺️

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

  • @dopehr
    @dopehr9 ай бұрын

    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 👍

  • @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 ☺️

  • @Channel-zo1zp
    @Channel-zo1zp Жыл бұрын

    Great explanation. I was totally confused about this and was using the stone-age properties.. i feel confident now

  • @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 🙌

  • @yasithsamarawickrama1683
    @yasithsamarawickrama16838 ай бұрын

    this was the best flexbox tutorial that i've ever seen, no rubbish, just straight to the point. nice work brother.

  • @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 😁

  • @abhavyaverma5101
    @abhavyaverma5101 Жыл бұрын

    This is what I was looking for. Direct and simple explanation. Great Work 😄

  • @slayingthedragon

    @slayingthedragon

    Жыл бұрын

    Thank you 😊😊❤❤❤

  • @pnrgenc
    @pnrgenc8 ай бұрын

    This is definitely best and cleanest explanation of the flexbox ever. Thank you, this is really great! 🌟

  • @SnakesRaven
    @SnakesRaven3 ай бұрын

    Well explained, to the point, no fluff... First tutorial I watch of this channel and I"m already impressed. Good job man!

  • @jamesfranchino
    @jamesfranchino Жыл бұрын

    Such a good explanation. Simple and no waste of time. A true professional!

  • @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 ❤️❤️

  • @shuylife
    @shuylife7 ай бұрын

    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!

  • @sayanmanna2511
    @sayanmanna25117 ай бұрын

    Bro it is so well explained in such a short time. No bs, pure content.. 🔥

  • @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 ❤️❤️

  • @bamas_1357
    @bamas_1357Ай бұрын

    Our school teacher showed us this video in class, now I am coming back because we have an test on this topic tomorrow :)

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

  • @Alexander_Haplington
    @Alexander_Haplington2 ай бұрын

    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!

  • @nemeziz_prime
    @nemeziz_prime Жыл бұрын

    I cannot express in words how brilliant this tutorial is 👏🏻👌🏻🔥

  • @slayingthedragon

    @slayingthedragon

    Жыл бұрын

    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 😋

  • @person81045
    @person81045 Жыл бұрын

    Brooooo. This is a BANGER video. No bs. Just straight to the heart. I love it. Subbed.

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

  • @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 ☺️

  • @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?

  • @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!*

  • @jordangray7208
    @jordangray72088 ай бұрын

    Great video! Helped me so much to understand flexbox it's crazy, about to try to use it myself now. Thank you!

  • @gt8846
    @gt8846 Жыл бұрын

    Thank you bro, your teaching is so easy to understand.

  • @Blackoutfor10days
    @Blackoutfor10days Жыл бұрын

    There's a huge demand of teachers like you 😊

  • @something_OfEverything
    @something_OfEverything Жыл бұрын

    Im so happy that i found your channel, very clear explanation, thank you for that, keep it up !

  • @Jrizy.
    @Jrizy.11 ай бұрын

    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 KZread if you continue to upload such powerful videos in the category of coding! Thank you! 💙

  • @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 kzread.info/dash/bejne/d52Cy7V_ebOvgag.html 😊

  • @HocineKamikaz

    @HocineKamikaz

    Жыл бұрын

    @@slayingthedragonmy duuuude...!! Thankssss a million time❤️

  • @miajowayuyu7273
    @miajowayuyu7273 Жыл бұрын

    love how the most watched moment is where he shows the base styles he said we should "ignore"

  • @Chopitupwithme
    @Chopitupwithme8 ай бұрын

    You conveyed this info effortlessly and effectively. Thanks!

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

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

  • @rayeesdot310
    @rayeesdot3103 ай бұрын

    flex-direction : column ; changes the axis is the best point

  • @gregou9885
    @gregou9885 Жыл бұрын

    Short, straight to the point and still exhautive. Great content, well done and 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!

  • @123arskas
    @123arskas Жыл бұрын

    Please make such concise videos for: 1- Bootstrap 2- Tailwind 3- React 4-MongoDB

  • @sanketpatil8682
    @sanketpatil8682 Жыл бұрын

    Bro can you make CSS web development course and put it in KZread 🙏👌

  • @slayingthedragon

    @slayingthedragon

    Жыл бұрын

    I might do that yes 🙂

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

  • @keithdeklerk7304
    @keithdeklerk73049 күн бұрын

    I've been struggling with flexbox until now. Your video certainly does what you set out to do....help us UNDERSTAND. Thanks so much!

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

  • @hassanmoechtar
    @hassanmoechtar11 ай бұрын

    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!

  • @johnanthonyprado1938
    @johnanthonyprado19386 ай бұрын

    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.

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

  • @consciousearth76
    @consciousearth767 ай бұрын

    love your video so much to the point with not frills, thanks

  • @wizpig64
    @wizpig64 Жыл бұрын

    A great explanation of the controls and their defaults. Thank you!

  • @sithumbuddika6295
    @sithumbuddika6295 Жыл бұрын

    I cannot express in words how brilliant , Short and Sweet this tutorial is 👏🏻👌🏻🔥 And ThankYou man !!!!

  • @eyewas9245
    @eyewas9245 Жыл бұрын

    Truly amazing video. This is the best most clear and concise video on the topic I've seen.

  • @trendzonweb8016
    @trendzonweb80167 ай бұрын

    Man!! Your starting was too good!!! & content is apt... superb!! Love the way you explain..

  • @mattvolpe1492
    @mattvolpe1492 Жыл бұрын

    That was amazing, you're great at doing these tutorials!

  • @Katzilla-1
    @Katzilla-13 ай бұрын

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

  • @berenjor
    @berenjor8 ай бұрын

    Instant sub! This is the best flex box explanation I’ve seen 👌

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

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

  • @kurtthorsten4463
    @kurtthorsten4463 Жыл бұрын

    bro, simple and to the point. great video, thank you

  • @alxbenjamin
    @alxbenjamin3 ай бұрын

    No fluff, just straight to the point. We need more tutorials like this.

  • @potatochan5391
    @potatochan53919 күн бұрын

    loved the video. Explains precisely and concisely. cleared my doubts too. Thank you

  • @nnejiben
    @nnejiben3 ай бұрын

    Awesome video! Searching for a short tutorial on CSS Flexbox and this is the best I've seen so far.

  • @briholland
    @brihollandАй бұрын

    That was very well explained. Looking forward to more. Thank you!

  • @SERGEANT21
    @SERGEANT218 ай бұрын

    Your explanation was great ASF and VERY easy to understand. You should make a whole CSS Bootstrap guide.

  • @RonaldoReacts-qh4ec
    @RonaldoReacts-qh4ec8 ай бұрын

    Keep Growing Brother. Really Appreciated..

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

  • @soominkim1660
    @soominkim16609 ай бұрын

    wow, this video is amazing. Very clear and really well explained, thanks!!

  • @richardjonathan5117
    @richardjonathan5117 Жыл бұрын

    Your teaching is mind opening... I understand everything I found difficult before now with a miraculous ease

  • @erickchavez4551
    @erickchavez4551 Жыл бұрын

    The visuals you include make everything much easier to understand. 10 out of 10!

  • @user-oy4vq9ze1x
    @user-oy4vq9ze1x2 күн бұрын

    Straight to the point with simple and understandable examples. Thanks man

  • @ArpeggioPegasusMusic
    @ArpeggioPegasusMusic6 ай бұрын

    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.

  • @merkgonzalez
    @merkgonzalez Жыл бұрын

    This is exactly what I needed for my project! Thanks a lot sir❤

  • @antoniobrandao1642
    @antoniobrandao16427 ай бұрын

    You just made me learn a concept in 8 minutes that would probably take an entire hour. Awesome video!

  • @mananbahl4842
    @mananbahl4842 Жыл бұрын

    This video Just randomly appeared while I was struggling with CSS Styling of my react app, and I decided to watch it turns out I now am confident and learnt so much. Thanks mate.

  • @junaidsindhu499
    @junaidsindhu499 Жыл бұрын

    Straight forward,no time waste,Appreciate your work. Cover all important items of flex .

  • @onepiecetcgmemes
    @onepiecetcgmemes Жыл бұрын

    I just learned this and had a simple understanding of this. You clarified it way more for me. thank you!

  • @Wangaruro
    @Wangaruro Жыл бұрын

    Literally the best Flexbox tutorial I have seen!!! I've learnt so much in 8 minutes.

  • @nepthunder
    @nepthunder Жыл бұрын

    Man! you should upload more. I really loved how you explained it. My problem anything that was related to flexbox is cleared.Loved it❤❤

  • @slayingthedragon

    @slayingthedragon

    Жыл бұрын

    Thank you, much love 😊❤❤

  • @michaelcronk
    @michaelcronk Жыл бұрын

    This is honestly the best explanation I have heard! Thank you 👍🏽

  • @user-sz5yz3zr7f
    @user-sz5yz3zr7f Жыл бұрын

    your explanations are just on point! thank you ♥

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

  • @kekuramusa
    @kekuramusa7 ай бұрын

    This is an amazing guide. Had to brush up on flexbox and this video has saved me loads of time.

  • @ce4083
    @ce4083 Жыл бұрын

    The best flexbox tutorial 🔥🔥🔥 Thank you so muchhhh

  • @AhLottaAntwan
    @AhLottaAntwan8 ай бұрын

    Thanks! This was so informative!

Келесі