移动到下一行时将图像扩展到容器宽度答案

【问题标题】：Expand Image to container width when moving to next line移动到下一行时将图像扩展到容器宽度
【发布时间】：2016-08-12 10:19:14
【问题描述】：

有没有办法使图像的宽度在过渡到另一条线时尽可能多地占用空间？

例如，如果图像彼此相邻显示，一旦其中一个下降到下一行，下一行的图像就会扩展到容器的宽度。

我相信我看到使用 flexbox 实现了这一点，但我不记得如何做到这一点，如果有其他方法可以做到这一点，我会全力以赴。

小提琴：https://jsfiddle.net/jzhang172/6kpyhpbh/

body,html{
  padding:0;
  margin:0;
}
*{
  box-sizing:border-box;
}
.grid img{

  float:left;
  height:100px;

}
.grid{
    display:flex;  flex-grow:2;
    flex-wrap:wrap;
}

<div class="grid">
  <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
  <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
    <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
      <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
        <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
</div>

【问题讨论】：

标签： javascript html css flexbox

【解决方案1】：

在图片中添加flex:1。

Revised Fiddle

body,
html {
  padding: 0;
  margin: 0;
}
* {
  box-sizing: border-box;
}
.grid {
  display: flex;
  /* flex-grow: 2;   <-- can be removed; not doing anything; applies only to flex items */
  flex-wrap: wrap;
}
.grid img {
  /* float: left;    <-- can be removed; floats are ignored in a flex container */
  height: 100px;
  flex: 1;           /* NEW; tells flex items to distribute available space evenly; 
                        a single flex item on the line will consume 100% of the space;
                        two flex items will take 50% each; etc. */
}

<div class="grid">
  <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
  <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
  <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
  <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
  <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
</div>

【讨论】：

嘿，非常感谢，附带问题，如果您只希望 flex:1 发生在第一行之后的所有内容上，这是我尝试过的，但它并不完美，它只是选择第一个元素而不是第一行：jsfiddle.net/jzhang172/osk0yqec/1
因此，您希望将所有项目定位到它们换行到第二行而不是之前。我不确定这在纯 CSS 中是否可行。

【解决方案2】：

将此行添加到.grid img

flex-basis: 25%;
display: flex;
flex-grow: 1;
height: 100%;
width: 100%;

flex-basis: 25% 将只允许每行 4 张图像

flex-grow: 1 将尝试将行中的图像扩大到 div 边界

width: 100%; height: 100%; 将保持图像纵横比

JS Fiddle

【讨论】：