Question

有没有办法制作图像的宽度，当它转换到另一条线以占用尽可能多的空间时？

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

我相信我看到这是通过flexbox实现的，但我无法记住如何做到这一点，如果有其他方法可以做到这一点，我全心全意。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

将flex:1添加到图片中。

Revised Fiddle

＆＃13;

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. */
}

＆＃13;

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

＆＃13;

Answer 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

移动到下一行时，将图像展开为容器宽度

2 个答案: