Skip to content
Submitted about 4 years ago

Dynamic spacing using nested flex layouts

Jeremy Ng•200
@lanechanger
A solution to the Social proof section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

4/5/2021 update:

  • 167160d 2021-04-06 | fix: removed the flex shrink on rating__stars to prevent the stars from wrapping (HEAD -> master, origin/master)
  • 056d2a1 2021-04-06 | fix: changed justify-content from end to flex-end for better compatibility (chrome)
  • 7ce075f 2021-04-06 | fix: restored margin-left to ratings layout
  • b738a17 2021-04-05 | fix: was using backquote instead of blockquote

4/4/2021: This was a fun one where I made liberal use of flex containers as a way of dynamically spacing out the components.

Like the ratings section for example. Initially I was practicing a for loop on it and made it such that margin-left = 16px * (x - 1) where x is each rating component. So the first one would have margin-left of 0, the 2nd would have 16px, the 3rd would have 32px.

Which works better for future proofing if additional components were to be added. But I decided to make them flex and assume that only 3 items are used, so the top one got justify-content of start, the 2nd one center, and the 3rd one end with the extra space being shrunk dynamically as the viewport shrunk. And I really liked how that turned out along with how the other flex containers shrink. It was mostly done through flex: 0 1 <basis> which prevented them from growing, but allowed them to shrink once the viewport got smaller than their basis.

Code

Please log in to post a comment

Log in

Community feedback

  • Joran Minjon•610
    @DrKlonk

    Hi Jeremy,

    Nice job overall! Some things I've noticed:

    The third rating box should be: justify-content: flex-end (instead of end).

    The stars wrap from 640-653 pixels wide for the middle rating, that looks a bit weird. Also, from 792 to 426 pixels wide the stars seem to move upon resizing. They don't align properly with the other ratings either.

    All this is because the rating__stars resizes because of the flex-shrink, but the stars have a fixed width. I think it is better to remove the flex-shrink from this class.

    Btw, flex: 0 1 auto is the default, so you don't even have to set the growth and shrink explicitly!

    Cheers, Joran

  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    Hello there, Jeremy Ng! 👋

    Nice job on another challenge! 👏

    A few things I'd like to suggest are,

    • Adding a little bit of space (using margin/padding) between the heading/description and the review boxes to the right of them in the desktop layout (so that there's a little bit of room between them, even when the width of the screen decreases).
    • Taking a look at your solution report and trying to clear up the few errors that are there (it looks like backquote isn't an HTML element—perhaps you meant blockquote?).
    • IDK why, but the third review box isn't shifted to the right in Chrome (like the second block quote). 🧐

    Keep coding (and happy coding, too)! 😁

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord