我有一个随机宽度图像的弹性盒网格:
我想将每行的元素拉伸到全宽以消除空白 - 如何使用 CSS 实现这一点?
justify-content
似乎没有多大帮助。我读过一些 JavaScript 技术,但如果可能的话我想避免使用它。
[已编辑]预期结果:示例
.grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.grid .grid-item {
width: auto;
display: inline-block;
vertical-align: bottom;
float: none;
margin: 1px;
overflow: hidden;
}
.grid .grid-item .grid-in {
padding: 0;
width: auto;
height: 190px;
vertical-align: bottom;
}
.grid img {
max-width: 100%;
width: 100%;
height: auto;
padding: 0;
}
<div class="grid">
<div class="grid-item">
<div class="grid-in">
<img src="http://placehold.it/190x190" alt="">
</div>
</div>
<div class="grid-item">
<div class="grid-in">
<img src="http://placehold.it/250x190" alt="">
</div>
</div>
<div class="grid-item">
<div class="grid-in">
<img src="http://placehold.it/100x190" alt="">
</div>
</div>
<div class="grid-item">
<div class="grid-in">
<img src="http://placehold.it/190x190" alt="">
</div>
</div>
<div class="grid-item">
<div class="grid-in">
<img src="http://placehold.it/250x190" alt="">
</div>
</div>
<div class="grid-item">
<div class="grid-in">
<img src="http://placehold.it/190x190" alt="">
</div>
</div>
<div class="grid-item">
<div class="grid-in">
<img src="http://placehold.it/100x190" alt="">
</div>
</div>
<div class="grid-item">
<div class="grid-in">
<img src="http://placehold.it/190x190" alt="">
</div>
</div>
<div class="grid-item">
<div class="grid-in">
<img src="http://placehold.it/250x190" alt="">
</div>
</div>
<div class="grid-item">
<div class="grid-in">
<img src="http://placehold.it/190x190" alt="">
</div>
</div>
<div class="grid-item">
<div class="grid-in">
<img src="http://placehold.it/100x190" alt="">
</div>
</div>
</div>
首先将每一行包装在一个容器中,例如
.grid-row
,其中将包含您之前分配给 .grid
的 Flexbox 属性。
现在为每个单元格设置
flex-grow
属性,该值可以是任何值,只要每行值的 ratio 正确即可。您可以简单地将其设置为单元格的宽度(不带单位),因此第一个单元格将具有 flex-grow: 190
。另外,请确保将所有 flex-shrink
上的 1
设置为 .grid-item
以避免 这个 flexbug。
要使图像一直拉伸,请从
inline-block
中删除所有 .grid-in
业务。为了使它们按比例增加高度,不要将其裁剪为 190px
,而是从 width: 190px
中删除 .grid-in
。
最后,为了将它们分开,在这种情况下,最好在
padding: 1px
上使用 .grid-item
,而不是在 margin: 1px
上使用 .grid-in
。
由于演示的精简程度不够,为了清晰起见我对其进行了清理。希望您知道如何在原始代码中实现它。
.grid-row {
display: flex;
}
.grid-item {
flex-shrink: 1;
padding: 1px;
}
.grid-row:nth-child(1) .grid-item:nth-child(1) { flex-grow: 190; }
.grid-row:nth-child(1) .grid-item:nth-child(2) { flex-grow: 250; }
.grid-row:nth-child(1) .grid-item:nth-child(3) { flex-grow: 100; }
.grid-row:nth-child(2) .grid-item:nth-child(1) { flex-grow: 190; }
.grid-row:nth-child(2) .grid-item:nth-child(2) { flex-grow: 250; }
.grid-row:nth-child(2) .grid-item:nth-child(3) { flex-grow: 190; }
.grid-row:nth-child(3) .grid-item:nth-child(1) { flex-grow: 100; }
.grid-row:nth-child(3) .grid-item:nth-child(2) { flex-grow: 190; }
.grid-row:nth-child(3) .grid-item:nth-child(3) { flex-grow: 250; }
.grid-row:nth-child(4) .grid-item:nth-child(1) { flex-grow: 190; }
.grid-row:nth-child(4) .grid-item:nth-child(2) { flex-grow: 100; }
.grid-row:nth-child(4) .grid-item:nth-child(3) { flex-grow: 190; }
.grid img {
width: 100%;
height: auto;
vertical-align: middle;
}
<div class="grid">
<div class="grid-row">
<div class="grid-item">
<div class="grid-in">
<img src="http://placehold.it/190x190" alt="">
</div>
</div>
<div class="grid-item">
<div class="grid-in">
<img src="http://placehold.it/250x190" alt="">
</div>
</div>
<div class="grid-item">
<div class="grid-in">
<img src="http://placehold.it/100x190" alt="">
</div>
</div>
</div>
<div class="grid-row">
<div class="grid-item">
<div class="grid-in">
<img src="http://placehold.it/190x190" alt="">
</div>
</div>
<div class="grid-item">
<div class="grid-in">
<img src="http://placehold.it/250x190" alt="">
</div>
</div>
<div class="grid-item">
<div class="grid-in">
<img src="http://placehold.it/190x190" alt="">
</div>
</div>
</div>
<div class="grid-row">
<div class="grid-item">
<div class="grid-in">
<img src="http://placehold.it/100x190" alt="">
</div>
</div>
<div class="grid-item">
<div class="grid-in">
<img src="http://placehold.it/190x190" alt="">
</div>
</div>
<div class="grid-item">
<div class="grid-in">
<img src="http://placehold.it/250x190" alt="">
</div>
</div>
</div>
<div class="grid-row">
<div class="grid-item">
<div class="grid-in">
<img src="http://placehold.it/190x190" alt="">
</div>
</div>
<div class="grid-item">
<div class="grid-in">
<img src="http://placehold.it/100x190" alt="">
</div>
</div>
<div class="grid-item">
<div class="grid-in">
<img src="http://placehold.it/190x190" alt="">
</div>
</div>
</div>
</div>
我偶然发现了这个问题,不幸的是无法使用 Flexbox 解决它。 答案可能会让你感到惊讶,但我发现这里最适合我的解决方案是一张桌子,是的,你没听错,是一张
<table>
!
需要记住一些限制:
table {
width: 100%;
margin: 0 0 10px 0;
padding: 0;
border-collapse: collapse;
}
table td {
padding: 0;
margin: 0;
}
img {
display: block;
width: 100%;
max-width: 100%;
}
<table>
<tr>
<td>
<img src="http://placehold.it/190x190" alt="">
</td>
<td>
<img src="http://placehold.it/250x190" alt="">
</td>
<td>
<img src="http://placehold.it/100x190" alt="">
</td>
</tr>
</table>
<table>
<tr>
<td>
<img src="http://placehold.it/190x190" alt="">
</td>
<td>
<img src="http://placehold.it/250x190" alt="">
</td>
<td>
<img src="http://placehold.it/190x190" alt="">
</td>
</tr>
</table>
<table>
<tr>
<td>
<img src="http://placehold.it/100x190" alt="">
</td>
<td>
<img src="http://placehold.it/190x190" alt="">
</td>
<td>
<img src="http://placehold.it/250x190" alt="">
</td>
</tr>
</table>
<table>
<tr>
<td>
<img src="http://placehold.it/190x190" alt="">
</td>
<td>
<img src="http://placehold.it/100x190" alt="">
</td>
<td>
<img src="http://placehold.it/190x190" alt="">
</td>
</tr>
</table>
您还可以使用其他 html 元素并使用 css 模仿表格行为
display: table | table-row | table-cell