Flexbox：如何将行的元素拉伸到全宽？答案

【问题标题】：Flexbox: How to stretch row's elements to full width?Flexbox：如何将行的元素拉伸到全宽？
【发布时间】：2015-10-18 17:08:04
【问题描述】：

我有一个随机宽度图像的 flexbox 网格：

我想将每一行的元素拉伸到全宽以消除空白 - 如何使用 CSS 实现这一点？
justify-content 似乎没有多大帮助。我已经阅读了一些 JavaScript 技术，但我想尽可能避免使用它。

[已编辑] 预期结果：example

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

【问题讨论】：

您也可以发布您的 HTML 吗？右边第三行的空白是你的问题？
您在.grid .grid-in .grid-item 上有 1 像素的边距。也许你应该删除它
@ManojKumar：我在问题中添加了一个代码 sn-p。 Luis：删除边距没有帮助。
如果您不关心图像之间的边距大小，也就是说目标是保持平滑的方形容器，您可以尝试使用justify-content: space-between
我也建议你去看看this clip，大约需要 30 分钟，之后你将成为 flex 的专业人士：P

标签： css flexbox

【解决方案1】：

首先将每一行包装在一个容器中，比如.grid-row，它将具有您之前分配给.grid 的那些Flexbox 属性。

现在为每个单元格设置flex-grow属性，值可以是任何值，只要每行值的比率正确。您可以简单地将其设置为单元格的宽度（没有单位），因此第一个单元格将具有flex-grow: 190。另外，请确保在所有.grid-items 上将flex-shrink 设置为1，以避免this flexbug。

要使图像一直延伸，请从.grid-in 中删除所有inline-block 业务。为了使它们按比例增加高度，而不是被裁剪为190px，请从.grid-in 中删除width: 190px。

最后，为了将它们分开，在这种情况下，最好在.grid-item 上使用padding: 1px 而不是在.grid-in 上使用margin: 1px。

由于演示的精简程度不够，为了清晰起见，我对其进行了清理。希望您知道如何在您的原始代码中实现它。

.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 和 rwd 的想法......
我同意。如果您可以在行周围添加容器，我编辑了我的答案以使用更优雅和 Flexboxy 的解决方案；）

【解决方案2】：

我偶然发现了这个问题，很遗憾无法使用 Flexbox 解决它。答案可能会让你大吃一惊，但我发现适合我的解决方案是一张桌子，是的，你没听错，<table>！

有几个限制要记住：

您应该知道每行所需的单元格/列数。
如果每行的列具有不同的宽度，则每行都需要一个表格元素。（'成员 2000 年代？）

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

【讨论】：