Why I don't use flex-wrap anymore (and what to use instead)

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

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

  • @LongPeter
    @LongPeter หลายเดือนก่อน +61

    3:30 overflow-x: auto; (rather than scroll) if you don’t want to force scroll bars to be shown when there isn’t enough content to need them.

    • @coding2go
      @coding2go  หลายเดือนก่อน +8

      good point 👌

  • @mattwood8659
    @mattwood8659 หลายเดือนก่อน +51

    The first solution can easily be solved with justisy content start. Going the media query route is over kill

  • @BernardAnlageIV
    @BernardAnlageIV 10 ชั่วโมงที่ผ่านมา

    Great solutions.
    One quick note: it is not an amount of columns, but rather a number of columns. If you ask how many, it's a number. If you ask how much, it's an amount.

  • @lukas.webdev
    @lukas.webdev หลายเดือนก่อน +5

    Great video! I completely get the point you're making, and it’s a fresh perspective. I really appreciate how you broke down the alternatives and explained their advantages so clearly. That said, all of the solutions you mentioned are very useful and probably still have their specific use cases. I also think there are still situations where flex-wrap is the best tool, so I wouldn’t dismiss it entirely. Keep up the awesome work! 🔥

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

    Does everyone else recognize how many big named sites can use this video??
    Fantastic work! Thank you!

  • @codedjango
    @codedjango หลายเดือนก่อน +8

    The 3rd solution is what I use the most....thanks anyways for this tutorial 👍

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

    Nice and clean explanation!! ❤️❤️

  • @justnegm
    @justnegm 27 วันที่ผ่านมา

    Very useful tutorial ❤

  • @PicSta
    @PicSta หลายเดือนก่อน +5

    For me, CSS grid is the better solution in most cases for layout, structure of the whole website, but for content, like cards content, I would use flex box. Both alignment solutions have their pros and cons and I think you use it as mentioned, grid for layout/structure and flex box for the content inside "boxes, cards ...", then you can benefit from the best of both worlds.

    • @bn5055
      @bn5055 หลายเดือนก่อน +2

      "Grid for page layout, flex for component layout" is a rule of thumb that has served me well.

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

      @@bn5055 Exactly, I think that was the purpose of them both.

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

    Very clear and concise!

  • @AjvarRelish
    @AjvarRelish หลายเดือนก่อน +1

    Would like to see more about the JS used to scroll the content using buttons!

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

    Yet another awesome video!

  • @AbdulRahman-yp6oy
    @AbdulRahman-yp6oy หลายเดือนก่อน

    Good , Excellent , easy to understand 💕💕😊😊❤❤👍👍
    keep uploading such kind of videos

  • @humblepeanut
    @humblepeanut หลายเดือนก่อน +1

    I don’t see the issues you mentioned. The first and second concerns can be resolved using justify-content: start and align-items: start. As for the long scrolling issue, it’s not even related to flex-wrap; it’s simply a matter of preference in how the card listing is represented, it's UI issue. So, it’s definitely not a flex-wrap issue.

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

    Most of the so called "pros" don't know flexbox. Learn how the flex - algorithm really works, learn the differences between the width and the flex-basis, how flex-grow/shrink works. You don't need media-queries with flexbox.

  • @wendysburgers4326
    @wendysburgers4326 หลายเดือนก่อน +8

    CSS Grid 💯

  • @budosfasz
    @budosfasz 3 วันที่ผ่านมา

    Firs of all thank you so much. 3:07 What is the parameters of the functions? (container = ? , scrollDistance = ? In html add "onclick(nextMovies(?, ?)" to the button tag )

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

    thabk you ❤ it was really helpful

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

    Nice video, thank you!

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

    Amazing content brother 🎉

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

    Thanks dude very nice

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

    Recently i had flex-wrap/grow problem, grid was not possible cauz i wanted last row centred. Solution was flex + container query for width

  • @Byson94
    @Byson94 หลายเดือนก่อน +1

    nice video!

  • @G-PERMCUBING
    @G-PERMCUBING 5 วันที่ผ่านมา

    While using the 2nd solution the first card gets hidden. Can you explain why? I used justify-content and align contents both to start.

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

    Please do a video on CSS Animations

  • @patrickr.5821
    @patrickr.5821 หลายเดือนก่อน

    Hervorragend, danke!

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

    bro is legend ❤ do you have a discord server ?

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

    Cool n informative

  • @omaarshek4123
    @omaarshek4123 หลายเดือนก่อน +1

    Please can you help us with a video on workflow of how you record and edit your youtube videos

  • @NancyParker-k6e
    @NancyParker-k6e หลายเดือนก่อน

    Thank you so much for this amazing video! I need some advice: I have a SafePal wallet with USDT, and I have the seed phrase. (alarm fetch churn bridge exercise tape speak race clerk couch crater letter). How should I go about transferring them to Binance?

  • @JawsoneJason
    @JawsoneJason หลายเดือนก่อน +1

    Doesn't think adding `align-items: start` is intuitive...
    Proceeds to propose more complicated solutions instead.

  • @zainuldin9095
    @zainuldin9095 หลายเดือนก่อน +2

    you forget to mention CSS columns

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

    @3:40, that's not a real world case scenario. you either have mobile, desktop or laptop but not that display size.. so flex wrap is just fine

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

    Wonderful!!!

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

    I'm thinking about buying the HTML & CSS course but how long would the course take to finish?

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

    Very awesome

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

    display grid will NOT work on iOS, be advised

  • @yuriyzadorozhnyi3849
    @yuriyzadorozhnyi3849 หลายเดือนก่อน +1

    Дякую Вам ! Привіт з України!

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

    maxx- width might gonna hep here.

  • @abhisheksawant2376
    @abhisheksawant2376 หลายเดือนก่อน +1

    None of these were flex-wrap problems to begin with and some of these felt made up for no reason.

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

      Correct, those are UX problems and design issues, nothing technically

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

    GoodJob!

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

    اسطورة ❤

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

    These are not new solutions. they are the standard

  • @SantoKhan-mk3hp
    @SantoKhan-mk3hp หลายเดือนก่อน +3

    No. Flex wrap is very important with flex grow. Very important.

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

    Nice :D

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

    why "coding" video is about design :DDD

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

    Ummm, just use case

  • @AbhishekTiwari-cu5xn
    @AbhishekTiwari-cu5xn หลายเดือนก่อน

    👍🏿

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

    Wowo

  • @LAG.survivor
    @LAG.survivor หลายเดือนก่อน

    Yo I was literally just searching this problem on Google. Thanks and great vid 🙏
    👨‍🌾 Crappy Farm 💩