Html 填充整个宽度和包裹的Flexbox图像网格

我试图创建一个填充整个空间的图像网格——这些图像的大小是随机的。在我的第一个例子中，我得到了一个基本版本

但我需要添加更多功能，并将这些图像包装到

div

s中。我不能让它工作。您可以检查第二个示例

这是一把小提琴

你知道我怎样才能解决这个问题吗

谢谢

<div class="thatworks grid">
  <img src="https://unsplash.it/40/30?random" alt="something"/>
  <img src="https://unsplash.it/35/30?random" alt="something"/>
  <img src="https://unsplash.it/42/30?random" alt="something"/>
  <img src="https://unsplash.it/31/30?random" alt="something"/>
  <img src="https://unsplash.it/44/30?random" alt="something"/>
  <img src="https://unsplash.it/32/30?random" alt="something"/>
  <img src="https://unsplash.it/22/30?random" alt="something"/>
  <img src="https://unsplash.it/40/30?random" alt="something"/>
  <img src="https://unsplash.it/35/30?random" alt="something"/>
  <img src="https://unsplash.it/42/30?random" alt="something"/>
  <img src="https://unsplash.it/31/30?random" alt="something"/>
  <img src="https://unsplash.it/44/30?random" alt="something"/>
  <img src="https://unsplash.it/32/30?random" alt="something"/>
  <img src="https://unsplash.it/22/30?random" alt="something"/>
  <img src="https://unsplash.it/42/30?random" alt="something"/>
  <img src="https://unsplash.it/31/30?random" alt="something"/>
  <img src="https://unsplash.it/44/30?random" alt="something"/>
  <img src="https://unsplash.it/32/30?random" alt="something"/>
  <img src="https://unsplash.it/22/30?random" alt="something"/>
</div>

<div class="doesntworks grid">
  <div>
    <img src="https://unsplash.it/40/30?random" alt="something"/> 
  </div>
  <div>
    <img src="https://unsplash.it/35/30?random" alt="something"/>
  </div>
  <div>
   <img src="https://unsplash.it/42/30?random" alt="something"/> 
  </div>
  <div>
    <img src="https://unsplash.it/31/30?random" alt="something"/>
  </div>
  <div>
    <img src="https://unsplash.it/44/30?random" alt="something"/>
  </div>
  <div>
    <img src="https://unsplash.it/32/30?random" alt="something"/>
  </div>
  <div>
    <img src="https://unsplash.it/22/30?random" alt="something"/>
  </div>
  <div>
    <img src="https://unsplash.it/40/30?random" alt="something"/>
  </div>
  <div>
    <img src="https://unsplash.it/35/30?random" alt="something"/>
  </div>
  <div>
    <img src="https://unsplash.it/42/30?random" alt="something"/>
  </div>
</div>


.grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 300px;
  border: 2px solid black;
  margin-bottom: 30px;
}

.thatworks img {
  flex: 1;
}

.doesntworks div {
  flex: 1;
}

.电网{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
宽度：300px；
边框：2件纯黑；
边缘底部：30px；
}
.那很管用{
弹性：1；
}
.doesntworks分区{
弹性：1；
}

只需将

display:flex

添加到您的div中，并将与您在工作网格中添加的样式相同的

img

：

CSS

演示

---

只需将

display:flex

添加到您的div中，并将与您在工作网格中添加的样式相同的

img

：

CSS

演示

---

您可以在

div

上使用

背景图像

属性，而不是在其内部有

img

标记吗？您可以在

div

上使用

背景图像

属性，而不是在其内部有

img

标记吗？噢，糟了。谢谢！！：）哦，是的。谢谢！！：）

.thatworks img, .doesntworks img {
    flex: 1;
}
.doesntworks div {
    flex: 1;
    display: flex;
}