CSS Flexbox in 100 Seconds

Поділитися
Вставка
  • Опубліковано 17 січ 2025

КОМЕНТАРІ • 488

  • @kabir52
    @kabir52 2 роки тому +198

    probably the only tutorial videos I play at normal speed

  • @Fireship
    @Fireship  4 роки тому +364

    Obviously CSS Grid is up next! Stay tuned for it next week. UPDATE - It has arrived ua-cam.com/video/uuOXPWCh-6o/v-deo.html

    • @ckpierre
      @ckpierre 4 роки тому +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 4 роки тому +2

      Hey how do you make the animation

    • @bhfaught
      @bhfaught 4 роки тому +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 4 роки тому

      Waiting

    • @Dibakash
      @Dibakash 4 роки тому

      eagerly waiting for that

  • @yauul
    @yauul 4 роки тому +1601

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

    • @mstroiu
      @mstroiu 4 роки тому +8

      hahaha! nice one!

    • @AlexiLaihoFan
      @AlexiLaihoFan 4 роки тому +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 3 роки тому +5

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

  • @arhabersham
    @arhabersham 4 роки тому +267

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

  • @SeriousGuy888
    @SeriousGuy888 4 роки тому +269

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

  • @ionutPavlencu
    @ionutPavlencu 4 роки тому +618

    do the CSS GRID in 100 seconds :)

  • @Bitrey
    @Bitrey 4 роки тому +159

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

    • @marcindomanski5654
      @marcindomanski5654 4 роки тому +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 4 роки тому +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 4 роки тому +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 4 роки тому +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 4 роки тому +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 4 роки тому +16

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

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

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

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

  • @suvraneelsaha7857
    @suvraneelsaha7857 Рік тому +1

    Lovely way to learn flexbox thanks mate

  • @SiyonRoy
    @SiyonRoy 4 роки тому +2

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

  • @Leon-lg7gb
    @Leon-lg7gb 7 місяців тому

    Danke!

  • @feyselahmed4581
    @feyselahmed4581 Рік тому +2

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

  • @bitcode_
    @bitcode_ 4 роки тому +29

    someone! give this channel the Education System

  • @kerimtim
    @kerimtim Рік тому +1

    Quickest video reference of CSS Flexbox. Thank you.

  • @luisguilherme2403
    @luisguilherme2403 3 роки тому

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

  • @MrDots99
    @MrDots99 4 роки тому +3

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

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

  • @mon0theist_tv
    @mon0theist_tv Рік тому +1

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

  • @otheraw5659
    @otheraw5659 4 роки тому +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

  • @zekMusicUK
    @zekMusicUK 9 місяців тому

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

  • @michaeljfordham
    @michaeljfordham 4 роки тому +2

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

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

  • @catorials444
    @catorials444 4 роки тому +14

    Cool video! I use this as a quick reference

  • @khotaasikkaa
    @khotaasikkaa 4 роки тому

    Wow, concept clear only in 100sec. Amazing

  • @StarcoreLabs
    @StarcoreLabs 4 роки тому

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

  • @josiaswando9561
    @josiaswando9561 11 місяців тому

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

  • @johnnycat5819
    @johnnycat5819 4 роки тому

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

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

  • @Zero_Ego
    @Zero_Ego 3 роки тому

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

  • @egbuniweemmanuel3643
    @egbuniweemmanuel3643 2 роки тому

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

  • @adalovelac24
    @adalovelac24 2 роки тому

    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

  • @samuelstroh8631
    @samuelstroh8631 4 роки тому +1

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

  • @raagyadav.8857
    @raagyadav.8857 11 місяців тому

    Love from India, such greater explanation.😊

  • @kingstingbaaghi3162
    @kingstingbaaghi3162 10 місяців тому

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

  • @ClimbingChica
    @ClimbingChica Рік тому

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

  • @Agrim26
    @Agrim26 3 роки тому

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

  • @abdDev_
    @abdDev_ Рік тому

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

  • @LoveWithAdrish
    @LoveWithAdrish 3 роки тому +1

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

  • @Deskofmj
    @Deskofmj 4 роки тому

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

  • @atistech8258
    @atistech8258 10 місяців тому

    Straight to the point. Thank you very much.

  • @pysof
    @pysof 6 місяців тому

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

  • @jamesmwangi2491
    @jamesmwangi2491 4 роки тому

    your simplicity is a masterpiece.

  • @ezj-ge8nl
    @ezj-ge8nl 4 роки тому

    Short, sweet and to the point. Awesome videos!

  • @asadurrehman6106
    @asadurrehman6106 4 роки тому

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

  • @aahil_dev5572
    @aahil_dev5572 Рік тому

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

  • @worldclasscode1847
    @worldclasscode1847 2 роки тому

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

  • @sergioalcantar3290
    @sergioalcantar3290 2 роки тому

    Clear, concise, comprehensive... Wow!

  • @arch7143
    @arch7143 4 роки тому

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

  • @wheres_bears1378
    @wheres_bears1378 4 роки тому

    These 100 seconds videos are awesome

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

  • @risnandianggara
    @risnandianggara 10 місяців тому

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

  • @HamdiElShahat89
    @HamdiElShahat89 4 роки тому +1

    Wow, this is crazy. I love it.

  • @hassaniyouness8024
    @hassaniyouness8024 4 роки тому

    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 .

  • @shivendrasrivastav393
    @shivendrasrivastav393 4 роки тому +2

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

  • @stepheng2131
    @stepheng2131 4 роки тому

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

  • @AndrewOnTestingCars
    @AndrewOnTestingCars 4 роки тому

    Incredible! brilliant succinct explanation of Flexbox. Thank you!

  • @user-cf5uf7vf2g
    @user-cf5uf7vf2g 4 роки тому

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

  • @2u841r
    @2u841r 4 місяці тому +4

    1:15 centered a div? hired

  • @YYYValentine
    @YYYValentine 4 роки тому

    Best tutorial ever, very explanatory animations!

  • @cameronhulse
    @cameronhulse 4 роки тому

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

  • @de_incridiboy
    @de_incridiboy 6 місяців тому

    The little touch with the doggies was hilarious 😂

  • @dankhnw8
    @dankhnw8 4 роки тому

    Best explanation yet TBH

  • @michaltymburski8528
    @michaltymburski8528 4 роки тому

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

  • @Leon-lg7gb
    @Leon-lg7gb 7 місяців тому

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

  • @danielalbano6905
    @danielalbano6905 4 роки тому

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

  • @cebanudan6458
    @cebanudan6458 4 роки тому +1

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

  • @lazymacs2823
    @lazymacs2823 3 роки тому

    The best css tutorial in just 100 seconds.

  • @peter.rosete28
    @peter.rosete28 3 роки тому

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

  • @KudoShinichii1412
    @KudoShinichii1412 11 місяців тому

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

  • @xen0076
    @xen0076 3 роки тому

    The only tutorial i need for learning flexbox

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

  • @AnacondaMMA
    @AnacondaMMA 5 місяців тому

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

  • @radhotorn05
    @radhotorn05 3 роки тому

    That was I’m looking for!!! Thanks!!

  • @codewithleonel__
    @codewithleonel__ 4 роки тому

    This is the best tutorial I have ever seen

  • @brilliantdirectoriestraining
    @brilliantdirectoriestraining 4 роки тому

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

  • @alwinshoots
    @alwinshoots 4 роки тому

    this is truly a great explanation thanks for making this

  • @lesterovaca
    @lesterovaca 4 роки тому

    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!

  • @parasshah195
    @parasshah195 4 роки тому

    The best explanation of flexbox in short.

  • @febobebo9634
    @febobebo9634 4 роки тому

    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.

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

  • @shrestha0144
    @shrestha0144 4 роки тому

    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

  • @jakobmatt8632
    @jakobmatt8632 11 місяців тому

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

  • @kanishk7267
    @kanishk7267 4 роки тому

    ThIs tutorial is work of art. Beautiful video.

  • @ziyaetuk
    @ziyaetuk 4 роки тому

    The best and smartest use of my 100s

  • @AhmadLearns
    @AhmadLearns 2 роки тому

    Being able to do such tutorial is the actual real FLEX

  • @leitto-corleone
    @leitto-corleone 4 роки тому +1

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

  • @wassollderscheiss33
    @wassollderscheiss33 3 роки тому +1

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

  • @alecryan8733
    @alecryan8733 Рік тому

    Love this. Thank you!

  • @gaurav3904
    @gaurav3904 4 роки тому

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

  • @TheEntium
    @TheEntium 4 роки тому

    Woah man! Really the most effective 100 seconds .. thanks

  • @diegosantos-jr8pn
    @diegosantos-jr8pn 4 роки тому

    Very objective and clear. Thank you very much for this content!

  • @acarahmetfaruk
    @acarahmetfaruk 4 роки тому

    We definitely want more such videos.

  • @YashRaj-zs1oo
    @YashRaj-zs1oo 2 роки тому

    "Tilt your head sideways"
    That was the answer all along.

  • @Itsrichayo
    @Itsrichayo 4 роки тому

    You are an Angel. Thank you for the tuts.