CSS Flexbox, HTML

Community feedback

• 

  Rafal•1,395

  @grizhlieCodesPosted over 3 years ago

  Howdy Sam.

  Keep the solutions coming 😁

  Edit: When potentially applying the below solutions take your time and play around with the code a bit so they make sense. I usually open up codepen or something and just make some simple mockups to ensure I understand the underlying concepts 👍

  I had a look and I have some brief pointers, might add to this a bit later if i get a moment.

  1. In your css add:

  :root, * {
     box-sizing: border-box;
  }
  

  This simply is more intuitive behaviour where sizing is concerned. It includes any margin/padding into the elements calculated width and height. This link should clear it up.

  This will already improve some sizing issues I noticed.

  2. Add flex: 1 0 200px to your .item class. This is a shorthand for flex: flex-grow flex-shrink flex-basis. All 3 are worth understanding so have a look and take your time. But you should see that your content will immediately look closer to what you'd expect.

  3. For your .container you can remove justify-content and align-items. These are only needed if your flex-parent is bigger than the content. In your projects case it is not, as the content is dictating the height.

  4. For your .container update the width property a bit:

  .container {
      /* other code */
     max-width: 920px;
  }
  

  This is just a simple way of accomplishing that without adding actual margin/padding. Of course do with sizing as you see fit.

  5. Remove align-self from .item.

  Hope that helps, if you have any questions to the above just ask and I'll reply on a break!

  Marked as helpful

  0
• 

  Sam•205

  @suansenPosted over 3 years ago

  Hi Rafal, Awesome stuff! thanks so much for the helpful and detailed feedback. I've improved the code per your suggestion and it's working as per expected now. I'll update the solution soon.

  0