css - 使用填充在五个图像之间 flex

Question

我知道通过将每张图片设置为 20% 并使用 flex-wrap: wrap，我可以在一个页面上获得五张图片。但是如何均匀地间隔图像？

我试过 justify-content: space-around; 但这看起来很荒谬。填充弄乱了 20% 宽度的计算。那么什么是好的机智呢？我不希望图像看起来像是缝合在一起的。如果有六张图片，那么第六张图片的右边会有很大的差距。我认为这很好。

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

我会将图像包装在标签中，以分别管理元素宽度和图像宽度。然后将 width 和 padding 应用于包含元素。将 img 的 width 设置为 auto，将 max-width 设置为 100% 以防止图像堆叠。

此外，您可以通过更改包装类属性来更改在不同屏幕尺寸下显示的图像数量。

谈到 flexbox，我总是会找到 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>