代码之家 › 专栏 › 技术社区 › hendry

使用填充将五幅图像弯曲

flexbox css

hendry · 技术社区 · 6 年前

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

2 回复 | 直到 6 年前

Frish 6 年前

我将把图像包装在一个标记中,分别管理元素宽度和图像宽度。然后应用 width 和 padding 在包含元素上。设置 宽度 属于 img 自动,和 max-width

此外,可以通过更改包装类属性来更改以不同屏幕大小显示的图像数。

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>

Naor Biton 6 年前

如果您希望图像的边框与容器的边框对齐,而不是被填充偏移,我将选择依赖于单侧边距的解决方案,但这不适用于每行的最后一项。

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

https://codepen.io/anon/pen/wEKmdG

免责声明:我和@hendry在同一个项目上工作。。。