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

发布时间：2020-12-14 22:36:21 所属栏目：资源来源：网络整理

导读：有没有办法制作图像的宽度,当它转换到另一条线以占用尽可能多的空间？例如,如果图像彼此相邻显示,则只要其中一个图像下降到下一行,下一行的图像就会扩展到容器的宽度. 我相信我看到这是用flexbox实现的,但是我不记得怎么做了,如果还有其他方法可以做到,我全

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

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

我相信我看到这是用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添加到图像中.
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. */
}


                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!