Dynamic spacing using nested flex layouts

Community feedback

• 

  Joran Minjon•610

  @DrKlonkPosted over 3 years ago

  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

  1

  ---

  

  Jeremy Ng•200

  @lanechangerPosted over 3 years ago

  @DrKlonk Thanks for the review Doc :)

  Can you explain the difference between flex-end and end? Or refer me to an article about them? It seems like chrome is more compatible with flex-end?

  Good call about the flex defaults. Would you recommend only setting the flex-basis or since the default for basis is auto, we can just set the width?

  0

  

  Joran Minjon•610

  @DrKlonkPosted over 3 years ago

  @lanechanger Basically neither justify-content: end, nor justify-content: start should do anything for a flexbox container. Therefore, they both default to justify-content: flex-start.

  It does seem to work in Firefox, but in my Chrome it just doesn't. You can see the support for it here.

  Justify-content is also a property for CSS grid, where end is a valid value. Check out this article for the ultimate flexbox guide. You can see the current proper values for it.

  Maybe justify-content also does something without either Flex or Grid, but I've never used it like that.

  On flex-basis: It's regarded as good practice to use the flex-basis instead of width or height. This article tells you why.

  Cheers!

  1
• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 3 years ago

  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)! 😁

  1

  ---

  

  Jeremy Ng•200

  @lanechangerPosted over 3 years ago

  @ApplePieGiraffe

  Heya APG, thanks for the review as always! :)

  OMG I was looking up the HTML error and trying to google why my backquote tags weren't working and couldn't find anything, the answer is now obvious that I have dreamed up this made up tag XD

  Hopefully the justify-content: flex-end solves the 3rd review box. I was using end before and I guess there is a difference between them after all!

  1