Flexbox CSS In 20 Minutes

แชร์
ฝัง
  • เผยแพร่เมื่อ 20 พ.ย. 2024

ความคิดเห็น • 1K

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

    New 2022 Flexbox Crash Course - th-cam.com/video/3YW65K6LcIA/w-d-xo.html

  • @computerhoofd
    @computerhoofd 4 ปีที่แล้ว +741

    Narrators in a lot of other videos sound too enthusiastic for my taste. That's why I love the way this guy explains things. He sounds so bored, and I love it. So soothing.

    • @sebastianbriones5413
      @sebastianbriones5413 3 ปีที่แล้ว +69

      He's got a life aside from coding, he doesn't live with cats like some other devs.

    • @Jester2b04
      @Jester2b04 3 ปีที่แล้ว +51

      Yea I agree. I like the matter-of-fact way of talking from him, because he sounds like he's done it for so long and seen so much that he sounds chill, calm, and collected; something you get from years of experience.

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

      You’re right i love it

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

      I feel like I'm back in school

    • @yvestrung7387
      @yvestrung7387 3 ปีที่แล้ว +8

      I can't realize it before. There's more space for me to listen to what he said, not his emotion

  • @SK0R092
    @SK0R092 5 ปีที่แล้ว +279

    20 minutes ago I couldn't get my head around flex boxes at all and now I feel like I proper understand them.
    Absolutely brilliant video
    Flex boxes are actually incredible. will look forward to using them

  • @hirbodkhatami9906
    @hirbodkhatami9906 4 ปีที่แล้ว +179

    TIP: align-items is for laying items along cross axis and justify-content is for laying items along main axis.

  • @chrismayes9816
    @chrismayes9816 6 ปีที่แล้ว +7

    Super helpful! Thank you very much for this video.
    Small point if anyone else gets confused at 5:20: author says both align-content and align-items are for the cross axis. I think this is right for items, but content is for the main axis!

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

    Hi Traversy Media you are the only man i like in explaining things in css, java, html, etc. I have been learning for about six month. But with your video and tutorials i get lots of improvement because you are practical. This is why i love you the most. When others explain i have not much improvement cause i dont know why, they are so advance or just not practical like you. You channel help me lots. Thanks to you and GOD BLESS YOU.

  • @sourandbitter3062
    @sourandbitter3062 6 ปีที่แล้ว

    I struggled for an hour on a simple navbar and got the idea to make it using flexbox. That was childs play. Thanks for the great explanation.

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

    Best tutorial have ever watched been finding it a bit hard to wrap my head around flexbox and grid model but with this course everything seems so much easier thanks Brad for this insightful video

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

    I really like the way you explain each flex property. In other videos, they just go through things so quickly that I find myself lost most of the time. Thanks for showing examples of how each of the properties function!

  • @JustPerfectDesigns
    @JustPerfectDesigns 3 ปีที่แล้ว +8

    This was recorded 4years ago and it still helped solve all my problems with flex box. You’re awesome T 💪

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

    this is what a learner wants --> no unnecessary excitements and no 'try hard' to make audience watch the video giving heavy expectations. Excellent work😀

  • @spaghetticode3107
    @spaghetticode3107 6 ปีที่แล้ว +38

    "Thay may be very well be the only thing you want to do, and that's fine."
    Iove that one line so much

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

    And just like that , this guy taught me in 20 mins what university couldn't teach me in 3 years
    thanks man

  • @ga7853
    @ga7853 7 ปีที่แล้ว +35

    Your video is the best on the net for flexbox, thanks a million for all the time you spent to make this simple and clear and many thanks for code.

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

    where were you all these years ? So simple and elegant explaining style

  • @bikkikumarsha
    @bikkikumarsha 5 ปีที่แล้ว +2103

    With 2x speed learn Flexbox in 10 minutes

    • @VivekRai05
      @VivekRai05 5 ปีที่แล้ว +114

      1.5x is the sweet spot

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

      I managed 2x - good idea!

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

      thanks bro

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

      I knew It before it was developed. You still aside

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

      life hack.

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

    Just took a Udemy course that didn't explain flexboxes -- you sir are a hero.

  • @aseemlalfakawma5084
    @aseemlalfakawma5084 7 ปีที่แล้ว +16

    Really informative, can't believe how easy it is to make column layouts now.

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

    By far the most clear explanation of flex. For me, that is.

  • @00el04
    @00el04 4 ปีที่แล้ว +24

    i always go back to this video for a refresher :)

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

    The one guy who says: give a dislike if you don't like it
    He already knows that there will be at least someone who like it and find it useful
    Thanks a lot Brad

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

    Thanks Brad. Your tutorials look easy compared to others. It's just hard to remember all of it, especially when you just start learning alongside JS

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

    Thanks again - Another great tutorial - I typed out the code with explaining comments as I watched. That's the only way I can thoroughly absorb and understand it. 3 weeks ago I knew nothing about html or css - after your short tutorials I am creating a professional website for our Knights of Columbus Council - THANK YOU!

  • @mda4455
    @mda4455 8 ปีที่แล้ว +128

    Good tutorials as always, Thanks Brad.

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

    Very helpful specially for those who wanna start css and getting too many problems while trying to give a perfect position of elements.
    Thanks Brad.

  • @luckywang95
    @luckywang95 7 ปีที่แล้ว +25

    I should have watch this before i start my work today. I have been scratching my head today to get everything align. Anyway, great tutorial!

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

    Probably one of those rare guys who says... "go ahead and dislike if you did not like the video". Brad you so genuine and we love it!!! Keep doing what you do and please continue your good work :)

  • @sxp2high
    @sxp2high 5 ปีที่แล้ว +35

    I've waited 17 years for this.

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

    You demonstrated it nicely with little examples first and then added it in the main code. I understood it without a problem. Thanks.

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

    When you know how difficult it is to fine a good tutorial then you must like this guy .

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

    I find flexbos so incredibly confusing by other instructors. Thanks once again Brad for making this straightforward and easy to understand!

  • @andylib
    @andylib 5 ปีที่แล้ว +158

    17:35 - wasn't expecting that 😂

    • @lyesbeyoud
      @lyesbeyoud 5 ปีที่แล้ว +31

      i have a f*** what is it six boxes ........ he meant to say five 😂

    • @zippytyro
      @zippytyro 4 ปีที่แล้ว +10

      Your ears passed the test.

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

      language!

    • @igorscream
      @igorscream 4 ปีที่แล้ว +7

      Yeah. Laughing too. You're like serious and explaining flexbox to lammers and then you're just "fuck..what is it?" hhahaha

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

      i actually went back when i heard this and was like.. uhh did he just say fuck? lol

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

    Find myself having to use a variety of different explanation sources to get my head around new concepts as I learn, this has solved my issues with Flexbox, thanks

  • @sumanbanerjee4756
    @sumanbanerjee4756 7 ปีที่แล้ว +3

    Wow flex is such an easy solution to complex CSSing! Thanks for creating this awesome tutorial :)

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

    Thank you. Creating these videos and taking the time to help has made a tremendous impact on my developing career.

  • @adamtak3128
    @adamtak3128 8 ปีที่แล้ว +653

    Nice! I'd like to make a request if it's not too much to ask. Could you do a tutorial on creating a website for a fictional client? I would love to see what the process is like. Frontend, and Backend with node.js?

    • @JamesQQuick
      @JamesQQuick 7 ปีที่แล้ว +60

      That's a great idea. Would love to see that as well!

    • @moca3417
      @moca3417 7 ปีที่แล้ว +21

      Would be very nice...although it would be a lot of work I guess. Anyways cool that he shares his knowledge ;)

    • @stunningmesh6263
      @stunningmesh6263 6 ปีที่แล้ว +3

      good idea

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

      Thats what I would really love too see!!!

    • @dereckportela1298
      @dereckportela1298 6 ปีที่แล้ว

      Up

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

    I just want to say that I have seen so many tutorials on flexbox but never fully understood it until I saw your video! Much love from Sweden! Keep up the good work :)

  • @PezhvakIMV
    @PezhvakIMV 7 ปีที่แล้ว +16

    flex-basis is not a more flexy way of using width property, it's different. if you use width property and browser size goes less than that, a horizontal scroll bar will be shown on the other hand if you use flex-basis, that flex-item will resize (shrink) in favor of browser width

    • @digbick9769
      @digbick9769 6 ปีที่แล้ว

      You sure? I thought that when you use width on flex-items, they can also shrink.

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

    Really like the way you explain, Brad! Giving details in an understandable manner showing both the code and the result, but also not dragging on for too long repeating obvious things.
    Thank you!

  • @Methgaard
    @Methgaard 7 ปีที่แล้ว +19

    Great tutorial, I'm convinced to leave Bootstrap behind and use Flexbox!

    • @SVJY15
      @SVJY15 7 ปีที่แล้ว

      LOL good idea !!

    • @jefjef418
      @jefjef418 6 ปีที่แล้ว

      now bootstrap 4 uses flexbox, there is no scape.

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

      You will definitely kick off the bootstrap from your computer if you ever watch one video on css grid this thing is savage man.

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

      If you just use the bootstrap Grid System it's better. But, in my case for example, I like the way bootstrap 4 looks, so I use it in my web systems.

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

    Man I don’t think I can ever pay you back for all the help you have give... I am truly great full ... thank you !!!!

  • @jigsaw009
    @jigsaw009 8 ปีที่แล้ว +3

    Hi Brad, it is really a top-notch tutorial. In the meantime, I really love to learn universal rendering using React and Node. Wish you could produce this kinda course in the near future. You are indeed an excellent instructor on TH-cam :)

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

    this Dude Genius Traversy changed my life. I always wanted learn HTML and CSS I always noticed that all other guys are more looking for ranking their videos and get some ads to make money with views, likes and other BSs. in this case here, This Guy is calm, clear, nice voice intonation, a fantastic pace for beginners and a superb knowledge about what he presents. I appreciate your time my friend.

  • @jeremy_s
    @jeremy_s 7 ปีที่แล้ว +87

    Wow. Why I have not used this before...

    • @serpent465
      @serpent465 7 ปีที่แล้ว +3

      exactly my thoughts!

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

      CSS grid is amazing it can do more than flex

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

      @Calin Belut that is why browser prefix is a thing

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

      @@goodester6924 was not enough for IE back in the day. It was easier to use "good" old floats which were at least "consistent"

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

      Flexbox is god

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

    Been following up on some of your courses lately and... I hardly leave comments but, I've got to say "YOU TEACH SUPER WELL" thanks for the support man! Really enjoy taking your courses

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

    Tuesday 21st April 2020
    Learning Class: Flexbox CSS In 20 Minutes
    Thank you Brad Traversy.

  • @КалинаВ0505
    @КалинаВ0505 2 ปีที่แล้ว

    You have a talent for explaining things. Love the organized way you explain everything! Rarely have I watched a tutorial with such quality.

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

    Just commenting so the algorithm shows this video first

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

    This truly is a useful tutorial. So many youtube videos A) do not explain and B) they just show you how to build 'this exact' website.. etc... Traversy Media explains and teaches, that's cool! {Thank you!} I'll be watching more of your videos for sure, like the one you pinned below - the '22 Crash Course. Thank you again!

  • @mikacar8905
    @mikacar8905 7 ปีที่แล้ว +3

    Bravo. Easy and clear tutorial. Just what I need.

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

    Thank you for the quick crash course video. I thought it was rather helpful to be honest and I appreciate you taking your time to make it. Well done, Sir!

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

    Thank you so much! This really helped me to visualize how flex box works. The text book I'm using to learn web dev had us apply flex box as one of the last steps in creating a website. It seems like it would be much easier to apply flex box at the beginning and add in the content of the website after all the boxes are properly arranged. Should flex box be applied at the beginning or end of a project?

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

    Amazing explanation. I am doing a course in parallel...had to resort to this video...splendid explanation. Thank you for the value provided.

  • @CodingPhase
    @CodingPhase 7 ปีที่แล้ว +30

    thank u need it this

    • @michaelarcher2496
      @michaelarcher2496 6 ปีที่แล้ว +8

      Lol u have a channel teaching people but didn't know how to do this 9 months ago, priceless

    • @FirstLast-rm7mb
      @FirstLast-rm7mb 6 ปีที่แล้ว +7

      @CodingPhake, You need to learn english.

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

      Oh I guess everyone should have everything they learn memorized. If not then you must be a fake developer. Or is this just a really nice, quick tutorial for anyone to refresh upon? Get off his nuts

  • @ernest1520
    @ernest1520 7 ปีที่แล้ว

    Your videos are awesome. I was mainly back-end guy and following your tutorials helped me a lot in learning front-end.

  • @christyguy59
    @christyguy59 7 ปีที่แล้ว +6

    Thank you, man! I think I'll soon owe my career to you.

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

    Thank you sooooooooooooooooo much for this tutorial. I've been struggling for FlexBox for a long time, and then I finally took some time to search up some basic tutorials, and your video cleared up so much for me.

  • @KoDesign0
    @KoDesign0 5 ปีที่แล้ว +12

    Sweet tutorial man! Cleared up a lot of shit for me. My teacher was outdated apparently.

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

    This made more sense than any other tutorial I've watched on flexbox. You really are an amazing instructor Brad.

  • @ДмитрийВалентинович-р7и
    @ДмитрийВалентинович-р7и 7 ปีที่แล้ว +7

    Thank you sp much! Its very simple but i hought it was harder
    :)

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

    This was extremely helpful. I think it was one of the better videos I've seen on the subject. Really appreciate you taking the time to make this video.

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

    thank you for the tutorial..

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

    your way of explaning is really unbelievable...i feel like i'm doped while i'm watching you

  • @TalhaZahid
    @TalhaZahid 7 ปีที่แล้ว +4

    Really really helpful video.. thanks ... your new subscriber from pakistan :)

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

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

  • @kidando
    @kidando 7 ปีที่แล้ว +4

    Mind blown... How have we bee developing sites and apps without flexbox?

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

    Usually my brain is confused. Great video. Gonna go practice ! Thank you

  • @mohitdas5292
    @mohitdas5292 5 ปีที่แล้ว +12

    Best video on flexbox...😎

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

    Wow. The way you explain the tutorial is amazing. I'm watching like 8 videos from you and I'm learning so much more than my clases. Hope to get more videos for fullstack. Greetings from Perú.

  • @nevinkuser9892
    @nevinkuser9892 4 ปีที่แล้ว +22

    "Alright, so what the hell is flexbox?" 😂😂😂

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

      didn't you see the video man!!

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

      @@srinicnu5283 dude @nevin kuser was just quoting what he said at 0:46

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

    everytime I forget flex i come here. probably my 3rd or 4th time. todays occation was... studying bootstrap flex so i need to refresh my flex before going to bootstrap. as always thank you

  • @МиколаУкроповичь
    @МиколаУкроповичь 8 ปีที่แล้ว +3

    very useful thanks

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

    great video as always. just with your first 2 beginners tutorials people thought my websites were REAL websites. Feels great.

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

    1:26 "it can be kind of pain in the ass" :D

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

      actually bets sentence in the whole video :D

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

      *D E M O N E T I Z E D*

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

    your channel and your videos are awesome. Now I am learning how css works.
    I am planning on my front end dev according to your videos

  • @muhammadablugg3723
    @muhammadablugg3723 5 ปีที่แล้ว +17

    but can it *W O R K U N D E R W A T E R ?*

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

      I just sawed this container into half and fixed with FLEX TAP- BOX!

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

      And can it run Crysis??

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

      Only on Fridays

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

    Thank you so much! I was struggling a lot to understand the whole parent child relationship of Flex but not anymore! :D

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

    17:36 Who else heard what I heard?

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

      "5, what is it? 6 boxes in here..?"

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

    I've learned CSS Grid before Flexbox and this makes me learn Flexboxes faster because it is much easier to understand now.

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

    “Alright so what the hell is flexbox?” 🤣

  • @eminm6383
    @eminm6383 6 ปีที่แล้ว

    Perfect explanation for beginners. Please keep going teaching stuff like that for beginners.

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

    *Hey i just created a professional website with wix*

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

    excellent course...been stuck with flex boxes but now I'm starting to get the hang of it.

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

    You are the best teacher for this!! I've been racking my brain to figure this out and then I found your channel! Thank you so much!!!

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

    This video is great,I just discovered you yesterday and I’ve learnt a lot

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

    I am going though my free-code camp project (web design), and I just came across your video at the right time. This is extremely helpful.

  • @romko-romario
    @romko-romario 3 ปีที่แล้ว

    The best tutorial on flexbox I've ever seen! Also, there's another great video about grid on this channel.

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

    I'm 3 years follower of your great videos... Thanks

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

    Wow!!! just got to understand the Flexbox better and in more depth than i had learn before in another website. thanks

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

    man you are one of the best instructor in web development

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

    this was very helpful! More and more people are migrating from youtube to odysee for more control of their content and more consistent payment, i'd love to be able to watch your videos there!

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

    Thank you so much for this video. I was struggling to understand the concepts just from reading them, so seeing this in real-time has been a huge help.

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

    Don't know why but at first introduction, Flex method seems very intimidating, thank you for the help!

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

    Thank you Brad for always made things get easier.

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

    Just learning html and css. This seems so much better and I’ll definitely be using his method

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

    Thank you! Flexbox is a game changer and a big concept to wrap your head around, this really helped me.

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

    Awesome tutorial, I have been using flex indirectly with bootstrap and oxygen but now i finally understand it for what it is. Thanks a lot.

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

    I just wanted to say thank you, all though things are still challenging it’s starting to get better. I really really appreciate you and your channel serious inspiration

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

    You and Net Ninja are my favorite Web Dev channels...keep fighting the good fight Brad! Awesome tutorial!!

  • @yukapikin.3249
    @yukapikin.3249 6 ปีที่แล้ว

    you can make anyone a good student, I salute you Mr.Traversy