Flexing five images across with padding

Question

I am aware I can get five image across a page by setting each image as width 20% and using flex-wrap: wrap. But how do I evenly space the images?

I tried justify-content: space-around; but that looks ridiculous. Padding messes up the 20% width calculation. So what's a good tact? I don't want the images to look like they are stitched together. If there are six images, there will be a large gap to right of the 6th image. I think that's fine.

article {
  display: flex;
  flex-wrap: wrap;
}

img {
  width: 20%;
  padding: 1em;
  /* I want five across with image spacing, how do I achieve this? */
}

<article>
  <img src="http://res.cloudinary.com/unee-t-staging/image/upload/c_fill,g_auto,h_500,w_500/Unee-T%20inspection%20report%20-%20placeholder%20images/table_succulent.jpg">
  <img src="http://res.cloudinary.com/unee-t-staging/image/upload/c_fill,g_auto,h_500,w_500/Unee-T%20inspection%20report%20-%20placeholder%20images/table_succulent.jpg">
  <img src="http://res.cloudinary.com/unee-t-staging/image/upload/c_fill,g_auto,h_500,w_500/Unee-T%20inspection%20report%20-%20placeholder%20images/table_succulent.jpg">
  <img src="http://res.cloudinary.com/unee-t-staging/image/upload/c_fill,g_auto,h_500,w_500/Unee-T%20inspection%20report%20-%20placeholder%20images/table_succulent.jpg">
  <img src="http://res.cloudinary.com/unee-t-staging/image/upload/c_fill,g_auto,h_500,w_500/Unee-T%20inspection%20report%20-%20placeholder%20images/table_succulent.jpg">
  <img src="http://res.cloudinary.com/unee-t-staging/image/upload/c_fill,g_auto,h_500,w_500/Unee-T%20inspection%20report%20-%20placeholder%20images/table_succulent.jpg">
</article>

Answer 1

If you want the borders of the images to be aligned with the borders of the container and not offset by the padding, I would opt for a solution that relies on one sided margin, but that does not apply to the last item of each row. Considering a row count of 5 items, and an image to image margin of 1% of the container's width, with the following DOM structure:

<div class="flex-container">
  <div>
    <img src="http://res.cloudinary.com/unee-t-staging/image/upload/c_fill,g_auto,h_500,w_500/Unee-T%20inspection%20report%20-%20placeholder%20images/table_succulent.jpg">
  </div>
  <div>
    <img src="http://res.cloudinary.com/unee-t-staging/image/upload/c_fill,g_auto,h_500,w_500/Unee-T%20inspection%20report%20-%20placeholder%20images/table_succulent.jpg">
  </div>
  <div>
    <img src="http://res.cloudinary.com/unee-t-staging/image/upload/c_fill,g_auto,h_500,w_500/Unee-T%20inspection%20report%20-%20placeholder%20images/table_succulent.jpg">
  </div>
  <div>
    <img src="http://res.cloudinary.com/unee-t-staging/image/upload/c_fill,g_auto,h_500,w_500/Unee-T%20inspection%20report%20-%20placeholder%20images/table_succulent.jpg">
  </div>
  <div>
    <img src="http://res.cloudinary.com/unee-t-staging/image/upload/c_fill,g_auto,h_500,w_500/Unee-T%20inspection%20report%20-%20placeholder%20images/table_succulent.jpg">
  </div>
  <div>
    <img src="http://res.cloudinary.com/unee-t-staging/image/upload/c_fill,g_auto,h_500,w_500/Unee-T%20inspection%20report%20-%20placeholder%20images/table_succulent.jpg">
  </div>
</div>

Apply the following styles:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-container div {
  max-width: 19.2%; /* (100 - ((items_per_row - 1) * 1) / (items_per_row)*/ 
  margin-bottom: 15px;
}
.flex-container div img {
  width: 100%;
  height: 100%;
}

.flex-container div:not(:nth-child(5n)) { /* matches number of items per row */
  margin-right: 1%;
}

Example on CodePen: https://codepen.io/anon/pen/wEKmdG

Disclaimer: I'm working with @hendry on the same project...

Answer 2

I would wrap the images in a tag to manage element width and image width separately. Then apply the width and padding onto the containing element. Set the width of img to auto, and max-width to 100% to prevent the images from stacking.

In addition, you can alter the number of images that display at different screen sizes by changing the wrapper class properties.

When it comes to flexbox, I always reach for CSS-tricks!

.flexbox {
  display: flex;
  flex-flow: row wrap;
}

.flexbox .image {
  width: 20%;
  padding: 0.5em;
}

.flexbox img {
  width: auto;
  max-width: 100%;
}

* {
  box-sizing: border-box;
}

<div class="flexbox">
<div class="image"><img src="https://qph.fs.quoracdn.net/main-qimg-0e316e1a1e2a600d0b922cddb3a5c6c2"></div>
<div class="image"><img src="https://qph.fs.quoracdn.net/main-qimg-0e316e1a1e2a600d0b922cddb3a5c6c2"></div>
<div class="image"><img src="https://qph.fs.quoracdn.net/main-qimg-0e316e1a1e2a600d0b922cddb3a5c6c2"></div>
<div class="image"><img src="https://qph.fs.quoracdn.net/main-qimg-0e316e1a1e2a600d0b922cddb3a5c6c2"></div>
<div class="image"><img src="https://qph.fs.quoracdn.net/main-qimg-0e316e1a1e2a600d0b922cddb3a5c6c2"></div>
<div class="image"><img src="https://qph.fs.quoracdn.net/main-qimg-0e316e1a1e2a600d0b922cddb3a5c6c2"></div>
<div class="image"><img src="https://qph.fs.quoracdn.net/main-qimg-0e316e1a1e2a600d0b922cddb3a5c6c2"></div>
</div>