通过填充使五幅图像相互融合

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应用于包含元素。将width中的img设置为自动，将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>

Answer 2

如果您希望图像的边界与容器的边界对齐并且不被填充物偏移，那么我将选择一种依赖于单边距的解决方案，但不适用于每一行。 考虑到5个项目的行计数，并且图像到图像的边距为容器宽度的1％，并具有以下DOM结构：

<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>

应用以下样式：

.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%;
}

关于CodePen的示例：https://codepen.io/anon/pen/wEKmdG

免责声明：我正在与@hendry从事同一项目...