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

Поделиться
HTML-код
  • Опубликовано: 8 фев 2025

Комментарии • 57

  • @LongPeter
    @LongPeter 2 месяца назад +65

    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  2 месяца назад +9

      good point 👌

  • @mattwood8659
    @mattwood8659 2 месяца назад +52

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

  • @lukas.webdev
    @lukas.webdev 2 месяца назад +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 2 месяца назад

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

  • @codedjango
    @codedjango 2 месяца назад +8

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

  • @wendysburgers4326
    @wendysburgers4326 2 месяца назад +8

    CSS Grid 💯

  • @BernardAnlageIV
    @BernardAnlageIV Месяц назад

    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.

  • @isaacgarcia2745
    @isaacgarcia2745 11 дней назад

    The grid solution is great if you have multiple items but when you only have a few the fraction will grow too big and take the whole container

  • @1adlan
    @1adlan 8 часов назад

    Thank you!

  • @shirakawaBa
    @shirakawaBa 2 месяца назад

    Nice and clean explanation!! ❤️❤️

  • @justnegm
    @justnegm 2 месяца назад

    Very useful tutorial ❤

  • @AbdulRahman-yp6oy
    @AbdulRahman-yp6oy 2 месяца назад

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

  • @PicSta
    @PicSta 2 месяца назад +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 месяца назад +2

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

    • @PicSta
      @PicSta 2 месяца назад

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

  • @AjvarRelish
    @AjvarRelish 2 месяца назад +1

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

  • @UberDurable
    @UberDurable 2 месяца назад

    Very clear and concise!

  • @budosfasz
    @budosfasz Месяц назад

    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 )

  • @petarkolev6928
    @petarkolev6928 2 месяца назад

    Yet another awesome video!

  • @Byson94
    @Byson94 2 месяца назад +1

    nice video!

  • @tapioo9707
    @tapioo9707 2 месяца назад +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.

  • @yashh7449
    @yashh7449 2 месяца назад

    thabk you ❤ it was really helpful

  • @RoldanMengote
    @RoldanMengote 2 месяца назад

    Nice video, thank you!

  • @omaarshek4123
    @omaarshek4123 2 месяца назад +1

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

  • @brunonery8098
    @brunonery8098 2 месяца назад

    Wonderful!!!

  • @a7mdbest15
    @a7mdbest15 2 месяца назад

    Thanks dude very nice

  • @patrickr.5821
    @patrickr.5821 2 месяца назад

    Hervorragend, danke!

  • @WilbonRobinson
    @WilbonRobinson 2 месяца назад

    Please do a video on CSS Animations

  • @ofmouseandman1316
    @ofmouseandman1316 2 месяца назад

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

  • @abdulrenishr
    @abdulrenishr 2 месяца назад

    Cool n informative

  • @G-PERMCUBING
    @G-PERMCUBING Месяц назад

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

  • @zdosdev3284
    @zdosdev3284 2 месяца назад

    bro is legend ❤ do you have a discord server ?

  • @NancyParker-k6e
    @NancyParker-k6e 2 месяца назад

    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 2 месяца назад +1

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

  • @Elonsol
    @Elonsol 2 месяца назад

    Very awesome

  • @DreamsInMotion37
    @DreamsInMotion37 2 месяца назад

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

  • @A5TXP
    @A5TXP 2 месяца назад

    اسطورة ❤

  • @zainuldin9095
    @zainuldin9095 2 месяца назад +2

    you forget to mention CSS columns

  • @ezwtwrziehag1736
    @ezwtwrziehag1736 2 месяца назад

    @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

  • @yuriyzadorozhnyi3849
    @yuriyzadorozhnyi3849 2 месяца назад +1

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

  • @abhisheksawant2376
    @abhisheksawant2376 2 месяца назад +1

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

    • @Minecraftzocker766
      @Minecraftzocker766 2 месяца назад

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

  • @Nodsaibot
    @Nodsaibot 2 месяца назад

    display grid will NOT work on iOS, be advised

  • @Piyussh_22
    @Piyussh_22 2 месяца назад

    Amazing content brother 🎉

  • @ramstylen6813
    @ramstylen6813 2 месяца назад

    maxx- width might gonna hep here.

  • @chesterxp508
    @chesterxp508 2 месяца назад

    GoodJob!

  • @LorenzoGasperoni
    @LorenzoGasperoni 2 месяца назад

    These are not new solutions. they are the standard

  • @Adnan_Inspires_Official
    @Adnan_Inspires_Official 2 месяца назад

    Nice :D

  • @AbhishekTiwari-cu5xn
    @AbhishekTiwari-cu5xn 2 месяца назад

    👍🏿

  • @ReturnMeVoid
    @ReturnMeVoid 2 месяца назад

    why "coding" video is about design :DDD

  • @humblepeanut
    @humblepeanut 2 месяца назад +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.

  • @oliver139
    @oliver139 2 месяца назад

    Ummm, just use case

  • @SantoKhan-mk3hp
    @SantoKhan-mk3hp 2 месяца назад +3

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

  • @Amar_Seid
    @Amar_Seid 2 месяца назад

    Wowo

  • @marinastrong7977
    @marinastrong7977 19 дней назад

    +

  • @LAG.survivor
    @LAG.survivor 2 месяца назад

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