Flexbox：如何将行的元素拉伸到全宽？ [英] Flexbox: How to stretch row's elements to full width?

问题描述

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

我想将每行的元素拉伸到全宽，以摆脱空白 - 我怎样才能实现与CSS？

justify-内容似乎没有多大帮助。我已经阅读了一些JavaScript技术，但是我希望尽可能避免它。

预期结果：示例

  .grid {display：flex; flex-wrap：wrap; justify-content：center;}。grid .grid-item {width：auto;显示：内联块; vertical-align：bottom; float：none; margin：1px; overflow：hidden;}。grid .grid-item .grid-in {padding：0;宽度：自动;身高：190px; vertical-align：bottom;}。grid img {max-width：100％;宽度：100％;身高：自动; padding：0;}  

< div class =grid > < div class =grid-item> < div class =grid-in> < img src =http://placehold.it/190x190alt => < / DIV> < / DIV> < div class =grid-item> < div class =grid-in> < img src =http://placehold.it/250x190alt => < / DIV> < / DIV> < div class =grid-item> < div class =grid-in> < img src =http://placehold.it/100x190alt => < / DIV> < / DIV> < div class =grid-item> < div class =grid-in> < img src =http://placehold.it/190x190alt => < / DIV> < / DIV> < div class =grid-item> < div class =grid-in> < img src =http://placehold.it/250x190alt => < / DIV> < / DIV> < div class =grid-item> < div class =grid-in> < img src =http://placehold.it/190x190alt => < / DIV> < / DIV> < div class =grid-item> < div class =grid-in> < img src =http://placehold.it/100x190alt => < / DIV> < / DIV> < div class =grid-item> < div class =grid-in> < img src =http://placehold.it/190x190alt => < / DIV> < / DIV> < div class =grid-item> < div class =grid-in> < img src =http://placehold.it/250x190alt => < / DIV> < / DIV> < div class =grid-item> < div class =grid-in> < img src =http://placehold.it/190x190alt => < / DIV> < / DIV> < div class =grid-item> < div class =grid-in> < img src =http://placehold.it/100x190alt => < / DIV> < / div>< / div>

解决方案

我偶然发现了这个问题，不幸的是无法使用Flexbox解决问题。
答案可能让你大吃一惊，但是我发现在这里找到合适的解决方案是一个表格，是的，你听到了我的意思，< table> ！

请注意以下几点：

1. 知道每行所需的单元格数/列数。


2. 在每一行的列宽度不同的情况下，每行都需要一个表格元素。 （'member 2000s？）

表格{宽度：100％;保证金：0 0 10px 0;填充：0; border-collapse：collapse;} table td {padding：0; margin：0;} img {display：block;宽度：100％;最大宽度：100％;}

< table> < TR> < TD> < img src =http://placehold.it/190x190alt => < / TD> < TD> < img src =http://placehold.it/250x190alt => < / TD> < TD> < img src =http://placehold.it/100x190alt => < / TD> < / TR>< /表><表> < TR> < TD> < img src =http://placehold.it/190x190alt => < / TD> < TD> < img src =http://placehold.it/250x190alt => < / TD> < TD> < img src =http://placehold.it/190x190alt => < / TD> < / TR>< /表><表> < TR> < TD> < img src =http://placehold.it/100x190alt => < / TD> < TD> < img src =http://placehold.it/190x190alt => < / TD> < TD> < img src =http://placehold.it/250x190alt => < / TD> < / TR>< /表><表> < TR> < TD> < img src =http://placehold.it/190x190alt => < / TD> < TD> < img src =http://placehold.it/100x190alt => < / TD> < TD> < img src =http://placehold.it/190x190alt => < / TD> < / tr>< / table>

您也可以使用其他html元素，并使用css

display：table |来模仿表格行为表格行| table-cell

I have a flexbox grid of random width images:

I would like to stretch elements of each row to full width in order to get rid of white-space - how can I achieve that with CSS?
justify-content doesn't seem to help much. I have read about some JavaScript techniques but I would like to avoid it if possible.

[Edited] Expected result: 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>

解决方案

I have stumbled across this issue and unfortunately couldn't solve it using Flexbox. The answer might suprise you, but what I found to be the appropriate solution for me here is a table, yeah you heard me right, a <table>!

There are a couple of constraints to keep in mind:

1. You should know the numbers of cells / columns you want on each row.
2. In the case where columns have different widths on every row, you'll need a table element for every row. ('member 2000s?)

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>

You can also use other html elements and mimic the table behaviour using css
display: table | table-row | table-cell

这篇关于Flexbox：如何将行的元素拉伸到全宽？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！