CSS Flexbox in 100 Seconds

แชร์
ฝัง
  • เผยแพร่เมื่อ 4 ก.พ. 2025

ความคิดเห็น • 490

  • @Fireship
    @Fireship  5 ปีที่แล้ว +364

    Obviously CSS Grid is up next! Stay tuned for it next week. UPDATE - It has arrived th-cam.com/video/uuOXPWCh-6o/w-d-xo.html

    • @ckpierre
      @ckpierre 5 ปีที่แล้ว +7

      Good Presentation! Because we can't play this video in mainland China, and not all the Chinese are understand English well. Can I add Chinese subtitle and republish it to a Chinese website like bilibili.com? Thank you.

    • @rudrakshprasad724
      @rudrakshprasad724 5 ปีที่แล้ว +2

      Hey how do you make the animation

    • @bhfaught
      @bhfaught 5 ปีที่แล้ว +3

      Can't wait for your grid explanation. It would not hurt my feelings if you took 10 minutes rather that 100 seconds. Everyone else takes hours to explain grid.

    • @SwapnilSoni
      @SwapnilSoni 5 ปีที่แล้ว

      Waiting

    • @Dibakash
      @Dibakash 5 ปีที่แล้ว

      eagerly waiting for that

  • @yauul
    @yauul 5 ปีที่แล้ว +1609

    This is a great tutorial, but he's also FLEXING that he can explain it in 100 secs.

    • @mstroiu
      @mstroiu 5 ปีที่แล้ว +8

      hahaha! nice one!

    • @AlexiLaihoFan
      @AlexiLaihoFan 5 ปีที่แล้ว +4

      Top shelf comment right here 🙌

    • @idlesquadron7283
      @idlesquadron7283 4 ปีที่แล้ว +3

      A good comment, unlike those overused *memes*

    • @randerins
      @randerins 4 ปีที่แล้ว +2

      oh no you didn't

    • @hakimbenzaid7904
      @hakimbenzaid7904 4 ปีที่แล้ว +5

      well, i guess that's how software engineers tell jokes

  • @kabir52
    @kabir52 2 ปีที่แล้ว +205

    probably the only tutorial videos I play at normal speed

  • @arhabersham
    @arhabersham 5 ปีที่แล้ว +268

    This guy and his team are MASTERS of concept-visualization ♥️

  • @SeriousGuy888
    @SeriousGuy888 5 ปีที่แล้ว +269

    A short and to the point explanation. I wish I had this when I was learning how to flexbox.

  • @ionutPavlencu
    @ionutPavlencu 5 ปีที่แล้ว +618

    do the CSS GRID in 100 seconds :)

  • @Bitrey
    @Bitrey 5 ปีที่แล้ว +159

    It's amazing how you manage to explain everything in such a short time

    • @marcindomanski5654
      @marcindomanski5654 5 ปีที่แล้ว +10

      Maybe 20-30%?. Do you know what is order, flex-basis, flex-grow, what difference is between flex-basis and width? What flex-direction affect on accesibility?

    • @Bitrey
      @Bitrey 5 ปีที่แล้ว +11

      @@marcindomanski5654 No, but now I know what Flexbox is and most of the basics without having to watch some hours-long videos

    • @Leonhart_93
      @Leonhart_93 5 ปีที่แล้ว +1

      @@Bitrey But this really isn't everything. Sure it's the basis and most of the use case scenarios. But you WILL encounter scenarios where you would need the other more specific stuff.

    • @Bitrey
      @Bitrey 5 ปีที่แล้ว +1

      @@Leonhart_93 With everything I meant every topic, not everything about every topic. And if you don't know something specific but you know the basics, you can simply Google it

    • @Leonhart_93
      @Leonhart_93 5 ปีที่แล้ว +4

      @@Bitrey Yeah well, I don't think the video touched every topic. I mean, all he presented was the distribution of a list of elements on the 2 axes. There is a lot more to Flexbox than that.
      There is this fun game called "Flexbox Froggy" where you need to arrange frogs on lily-pads using flexbox. I recommend that game to anyone that isn't a Flexbox absolute master.
      That will gradually dwelve much deeper into Flexbox, and even that is still like only 90% of all there is about it.

  • @firecracker371
    @firecracker371 4 ปีที่แล้ว +26

    As a coder who is coming back to CSS after a long break, I appreciate these videos a great deal. I don't need to follow a long drawn out tutorial to grasp most of these concepts, but a little more than what docs present is still necessary. Your 100 second videos provide the perfect balance between the two. You have saved me weeks of research with your fast and to the point style of presenting content. Thank you.

  • @ohnoez078
    @ohnoez078 5 ปีที่แล้ว +16

    Man, I cant say how much I love this 100 second videos. They are super short and very informative. Thanks a bunch!

  • @lizunchx6049
    @lizunchx6049 3 ปีที่แล้ว +12

    If every uni prof taught their courses like this man, a bachelor's degree would only take 2 years max.
    Seriously, this channel is a literal gold mine of KNOWLEDGE! Why haven't I found it sooner?

    • @Mogwai88
      @Mogwai88 2 ปีที่แล้ว +2

      More like 100 days

    • @dibel3669
      @dibel3669 ปีที่แล้ว

      But how else would colleges squeeze your life savings out of you? You NEED that class about ancient pottery.

    • @lizunchx6049
      @lizunchx6049 ปีที่แล้ว

      @@dibel3669 Oh yea, and don’t forget gender studies too. Definitely need those kNOwlEDge for building a successful career and strong intellect too :P

    • @Russellbeta
      @Russellbeta 3 หลายเดือนก่อน

      Sure but there's little to no depth, watching this video merely gives you a high level idea of what it is, it takes a lot more to have working knowledge.

  • @kunalverma2746
    @kunalverma2746 3 ปีที่แล้ว +1

    minddddd blownnnn man wtf was searching for a flex box tutorial from last 5 hours found a few but they all were like 15-20 mins long! and i sill couldn't understand them and you made me understand this in 100 seconds!
    thankyou so much man!!

  • @lukehatcher98
    @lukehatcher98 4 ปีที่แล้ว +5

    I love these short introductions. I think they are so perfect to watch before diving deep into a topic with a long detailed tutorial

  • @daneedwards7739
    @daneedwards7739 4 ปีที่แล้ว +1

    By far the best video on CSS Flexbox I've seen. I've been struggling to figure this out for months. Thank you for this.

  • @denniswilliamsjr5646
    @denniswilliamsjr5646 4 ปีที่แล้ว +3

    I have been struggling with this for a while now and you’ve made it so easy to understand. Thank you so much!!!

  • @feyselahmed4581
    @feyselahmed4581 ปีที่แล้ว +2

    This is better than the two hour tutorial on Udemy I took today.

  • @ddd42809
    @ddd42809 4 ปีที่แล้ว

    I have started prepending youtube searches for certain development concepts like flexbox with "fireship" just because I know that if you have a video on it, it will be no-nonsense and to the point. Thanks!

  • @SiyonRoy
    @SiyonRoy 4 ปีที่แล้ว +2

    You explained it in 100 Seconds and I subscribed in 10 seconds. Looks like I am the winner

  • @kerimtim
    @kerimtim ปีที่แล้ว +1

    Quickest video reference of CSS Flexbox. Thank you.

  • @suvraneelsaha7857
    @suvraneelsaha7857 ปีที่แล้ว +1

    Lovely way to learn flexbox thanks mate

  • @mon0theist_tv
    @mon0theist_tv ปีที่แล้ว +1

    These videos are super helpful when you're new and just trying to get simple explanations for things, thanks

  • @zekMusicUK
    @zekMusicUK 10 หลายเดือนก่อน

    I've spent hours trying to understand flex box, this man just taught me everything.

  • @luisguilherme2403
    @luisguilherme2403 3 ปีที่แล้ว

    Holy damn you're good! 5years into webdev and I've never seen such a concise explanation!!!!!

  • @juanescobar3741
    @juanescobar3741 11 หลายเดือนก่อน

    This is the video I was waiting for... I hadn't been able to understand the concept thoroughly, but with this ahora video, I totally get it now!!! Thanks!!! ❤

  • @MrDots99
    @MrDots99 5 ปีที่แล้ว +3

    You just keep making videos that I need! thank you so much, man!

  • @josiaswando9561
    @josiaswando9561 ปีที่แล้ว

    This was more informative than most of flexbox tutorials i already seen.

  • @adalovelac24
    @adalovelac24 3 ปีที่แล้ว

    i'm in love with those shorts videos
    it give ma a clear idea about subjects and i use them as a summary to refresh my mind

  • @egbuniweemmanuel3643
    @egbuniweemmanuel3643 2 ปีที่แล้ว

    Best and precise revision I could find on CSS Flexbox. Thank you

  • @Agrim26
    @Agrim26 3 ปีที่แล้ว

    Dude wtf. I was struggling all night for adjusting items and you explained it in 100 seconds. 🙌

  • @etalis811
    @etalis811 4 ปีที่แล้ว

    I was hesitant to click on this because I was doubtful I would be able to get all the information I needed in such a short amount of time. It turned out to give me everything I needed. Great tutorial!

  • @bitcode_
    @bitcode_ 5 ปีที่แล้ว +29

    someone! give this channel the Education System

  • @Zero_Ego
    @Zero_Ego 4 ปีที่แล้ว

    Perfect using graphics. Man I hope you have more. This is my new No.1 channel. :)

  • @StarcoreLabs
    @StarcoreLabs 4 ปีที่แล้ว

    Hands down the best Flexbox tutorial I've ever seen. Thank you!

  • @khotaasikkaa
    @khotaasikkaa 4 ปีที่แล้ว

    Wow, concept clear only in 100sec. Amazing

  • @michaeljfordham
    @michaeljfordham 5 ปีที่แล้ว +2

    It's incredible how you made it all seem so simple so easily, thank you!!

  • @otheraw5659
    @otheraw5659 5 ปีที่แล้ว +6

    I feel like, this kind of content is more shine in video format than in the article.
    So easy to understand till make me laugh LMAO

  • @LoveWithAdrish
    @LoveWithAdrish 3 ปีที่แล้ว +1

    This was way clear than any other tutorials. Thanks :)

  • @kingstingbaaghi3162
    @kingstingbaaghi3162 11 หลายเดือนก่อน

    thankyou for the video even after 4 years it's still helpful;
    I ♥ it

  • @abdDev_
    @abdDev_ ปีที่แล้ว

    Bro that's everything?
    like you are the best teacher anyone can ask for

  • @pysof
    @pysof 7 หลายเดือนก่อน

    I'm a backend developer and this only tutorial was needed for frontend requirements in my app.

  • @fmonel
    @fmonel 4 ปีที่แล้ว +6

    You, sir, are an absolute legend. I sat through a 20min video explaining flexbox only to be more confused.
    I just wanted the basic gist of how it works. Watched yours and everything makes perfect sense. All in 100 seconds.
    Goes to show Einstein was correct. "if you can't explain it simply, you don't know it well enough"

  • @johnnycat5819
    @johnnycat5819 4 ปีที่แล้ว

    Short & sweet. No BS. Easy to understand. Thank you.

  • @Deskofmj
    @Deskofmj 5 ปีที่แล้ว

    Please keep doing this. This is the best way to learn.

  • @worldclasscode1847
    @worldclasscode1847 2 ปีที่แล้ว

    Nice vid! I love Flexbox. It's so useful. I use it on each and every web page, multiple times.

  • @catorials444
    @catorials444 5 ปีที่แล้ว +14

    Cool video! I use this as a quick reference

  • @raagyadav.8857
    @raagyadav.8857 ปีที่แล้ว

    Love from India, such greater explanation.😊

  • @ClimbingChica
    @ClimbingChica ปีที่แล้ว

    So good. Visual, clear, and concise. Bravo.

  • @stepheng2131
    @stepheng2131 5 ปีที่แล้ว

    I learned more in that 100 seconds than I ever knew about the flex property, thanks!

  • @asadurrehman6106
    @asadurrehman6106 4 ปีที่แล้ว

    Perfecto
    Fabulous
    کمال
    زبردست ۔۔۔

  • @samuelstroh8631
    @samuelstroh8631 5 ปีที่แล้ว +1

    The best tutorial ever, great audio, great animation to understand stuff, keep it up!

  • @Leon-lg7gb
    @Leon-lg7gb 8 หลายเดือนก่อน

    Danke!

  • @michaltymburski8528
    @michaltymburski8528 4 ปีที่แล้ว

    I've been struggling with the flexbox for a long time. this tut in 100 sec made everything clear xD

  • @hassaniyouness8024
    @hassaniyouness8024 5 ปีที่แล้ว

    You know what this video is really flex-box in 100s thank you so much and we want a video about css grid like this one .

  • @jamesmwangi2491
    @jamesmwangi2491 5 ปีที่แล้ว

    your simplicity is a masterpiece.

  • @aahil_dev5572
    @aahil_dev5572 ปีที่แล้ว

    Thank you , The best one , everything basically needed in such short time , Amazing

  • @risnandianggara
    @risnandianggara 11 หลายเดือนก่อน

    i love it bro
    i just recently getting back to learn html that i forgot years ago
    thank you

  • @atistech8258
    @atistech8258 11 หลายเดือนก่อน

    Straight to the point. Thank you very much.

  • @arch7143
    @arch7143 5 ปีที่แล้ว

    Fireship really does have the very best animations and video quality of all proggy youtube people!

  • @shivendrasrivastav393
    @shivendrasrivastav393 5 ปีที่แล้ว +2

    Bruhhhhh🔥🔥🔥🔥...
    This is one of best really..
    Nice way to represent.

  • @chris-adams-tas
    @chris-adams-tas ปีที่แล้ว

    Great explainer IMHO. it's great because it piques interest and expresses the significant properties quickly.
    There's a lot more to flex properties than this but it sows the seed.

  • @brilliantdirectoriestraining
    @brilliantdirectoriestraining 4 ปีที่แล้ว

    Love the fact that you said either a column OR a row.

  • @AnacondaMMA
    @AnacondaMMA 6 หลายเดือนก่อน

    Bro you are the greatest thing for a new coder😭. You explained this in such great detail I couldn’t NOT understand flexbox.

  • @wheres_bears1378
    @wheres_bears1378 5 ปีที่แล้ว

    These 100 seconds videos are awesome

  • @ezj-ge8nl
    @ezj-ge8nl 5 ปีที่แล้ว

    Short, sweet and to the point. Awesome videos!

  • @sergioalcantar3290
    @sergioalcantar3290 2 ปีที่แล้ว

    Clear, concise, comprehensive... Wow!

  • @dankhnw8
    @dankhnw8 4 ปีที่แล้ว

    Best explanation yet TBH

  • @danielalbano6905
    @danielalbano6905 5 ปีที่แล้ว

    You helped solve my websites issues in 45 seconds, thank you so much!

  • @xen0076
    @xen0076 3 ปีที่แล้ว

    The only tutorial i need for learning flexbox

  • @shrestha0144
    @shrestha0144 5 ปีที่แล้ว

    flex is easy to learn yet kindaa gets complicated to master....thanks for the video and i'll be waiting for the grid one and hopefully you'll keep doing more of these as i love these content

  • @HamdiElShahat89
    @HamdiElShahat89 4 ปีที่แล้ว +1

    Wow, this is crazy. I love it.

  • @kanishk7267
    @kanishk7267 4 ปีที่แล้ว

    ThIs tutorial is work of art. Beautiful video.

  • @erbhargavvyas
    @erbhargavvyas 4 ปีที่แล้ว

    Awesome! Before learning anything such intor is required. It helps to know what I will end up with by learning this tech.

  • @cebanudan6458
    @cebanudan6458 5 ปีที่แล้ว +1

    Really good guide! I'd like to see more videos about css / sass

  • @YYYValentine
    @YYYValentine 4 ปีที่แล้ว

    Best tutorial ever, very explanatory animations!

  • @lesterovaca
    @lesterovaca 5 ปีที่แล้ว

    Wonderful explanation, I subscribed cuz of that, as begginer I was searching for visual explanation as is easier to remember the code and what it does, great!

  • @codewithleonel__
    @codewithleonel__ 4 ปีที่แล้ว

    This is the best tutorial I have ever seen

  • @cameronhulse
    @cameronhulse 4 ปีที่แล้ว

    You are a beast, great video exactly what i was looking for definitely do more of these

  • @wassollderscheiss33
    @wassollderscheiss33 3 ปีที่แล้ว +1

    Thanks! That's enough info for me to go and use it.

  • @KudoShinichii1412
    @KudoShinichii1412 ปีที่แล้ว

    WOWWWWWWWWWWWWWWWWW
    I ONLY NEEDED SOMEONE TO EXPLAIN IT THIS WAY
    THIS VIDEO PERFECT

  • @Leon-lg7gb
    @Leon-lg7gb 8 หลายเดือนก่อน

    taught me what my teacher in school couldnt in 2 hours in 100 seconds ily

  • @MaxPicAxe
    @MaxPicAxe 5 ปีที่แล้ว

    I can't believe you can explain this so well and I understand so will in 50seconds (2x speed)

  • @de_incridiboy
    @de_incridiboy 7 หลายเดือนก่อน

    The little touch with the doggies was hilarious 😂

  • @parasshah195
    @parasshah195 5 ปีที่แล้ว

    The best explanation of flexbox in short.

  • @lazymacs2823
    @lazymacs2823 3 ปีที่แล้ว

    The best css tutorial in just 100 seconds.

  • @user-cf5uf7vf2g
    @user-cf5uf7vf2g 4 ปีที่แล้ว

    I love this video, fast recap some useful tips is always welcome!

  • @Cherryyv._.v
    @Cherryyv._.v 4 หลายเดือนก่อน

    (Self notes)
    FlexBox = flexible way to layout item as a column or a row
    Start with container: ex:
    Give display property flex
    Container has now control of how the item are layed out
    Default flex direction set to row
    Row-> main access:horizontal (Start left) cross access:vertical (Start up)
    Main size: widht of object.
    Justify content: control space and alignment of item (horizontal only)
    Align-item: control space and alignment of item (verticaly)

    • @Cherryyv._.v
      @Cherryyv._.v 4 หลายเดือนก่อน

      Convert row to column -> set flex direction column

  • @AndrewOnTestingCars
    @AndrewOnTestingCars 4 ปีที่แล้ว

    Incredible! brilliant succinct explanation of Flexbox. Thank you!

  • @luis96xd
    @luis96xd 5 ปีที่แล้ว

    This is an excellent video! I like so much this 100 seconds video

  • @leitto-corleone
    @leitto-corleone 5 ปีที่แล้ว +1

    Loving this channel, great video quality in terms of presentation and also very concise explanation

  • @zsaing1
    @zsaing1 4 ปีที่แล้ว +1

    excellent content in such short time...

  • @mirandamandarin7028
    @mirandamandarin7028 3 ปีที่แล้ว

    I never subscribe, but I will now…why doesn’t my teacher teach me the way you do?! Visual teaching is the best, thank you :)

  • @jakobmatt8632
    @jakobmatt8632 ปีที่แล้ว

    Just helped me solve 90% of an assignment in 100 seconds.

  • @peter.rosete28
    @peter.rosete28 4 ปีที่แล้ว

    HOLY FUCK, that was the best explanation I've seen about anything ever.

  • @juniorrrrrrrrrrrrrrrrrrrrr
    @juniorrrrrrrrrrrrrrrrrrrrr ปีที่แล้ว +1

    so awesome dude

  • @gaurav3904
    @gaurav3904 5 ปีที่แล้ว

    Thank you so much sir for this 100 second videos. Thank you again

  • @febobebo9634
    @febobebo9634 5 ปีที่แล้ว

    Amazing video. Thank you a lot.
    It helped me to truly understand flexbox.
    And yes I do want more videos in a format like this.

  • @craigfreeze2975
    @craigfreeze2975 ปีที่แล้ว +1

    best tutorial I've seen!

  • @alwinshoots
    @alwinshoots 4 ปีที่แล้ว

    this is truly a great explanation thanks for making this

  • @ziyaetuk
    @ziyaetuk 5 ปีที่แล้ว

    The best and smartest use of my 100s

  • @jjcapanegra
    @jjcapanegra 5 ปีที่แล้ว +1

    I wish you had done a longer video for this. I think 100 seconds is useful if the subject is small, otherwise it's feels incomplete. Cool video though, you are always really clean with your animations and explanations

  • @trojon
    @trojon 4 ปีที่แล้ว

    I watched a 90 min tutorial. Half was on this. This explained it so much fukin better as an overview that makes fukin sense.