有没有办法制作图像的宽度,当它转换到另一条线以占用尽可能多的空间？
例如,如果图像彼此相邻显示,则只要其中一个图像下降到下一行,下一行的图像就会扩展到容器的宽度.
我相信我看到这是用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;
}
最佳答案
将flex：1添加到图像中.
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. */
}
