html - Flexbox:当屏幕太小时折叠 - 如何？

Question

我想在我的网站上实现两张图片，只要屏幕宽度大于 600 像素，它们就会并排显示，但当可用宽度较小时(例如在智能手机上)，它们就会折叠。

.imgrid {
  display: flex;
  flex-flow: row wrap;
}

.img {
  flex: 1;
}

.img img {
  max-width: 100%;
}

<section class="imgrid">
  <div class="img">
    <img src="http://via.placeholder.com/500x500" />
  </div>
  <div class="img">
    <img src="http://via.placeholder.com/500x500" />
  </div>
</section>

.imgrid 具有 flex-flow: row wrap 以便当没有足够的空间在同一行显示两个元素时它会换行。所以这里的想法是，一旦没有足够的可用屏幕宽度，它就会自然地折叠。

但是，

.img 的 flex: 1; 阻止了这种情况的发生，因为图像将被缩放为相同的大小并共享线条的宽度。

我添加了一个媒体查询，但我不知道该怎么做。理想情况下，我会简单地删除 flex: 1 但我认为这是不可能的。

如何在不恢复使用 px 的情况下实现这种效果？我的意思是 flex wrapping 是一种非常优雅的做事方式，我认为有一种非常自然的方式可以实现这一点？

Answer 1

当屏幕小于 600px 时，您可以添加媒体查询。演示:

.imgrid {
  display: flex;
  flex-flow: row wrap;
}

.img img {
  width: 100%;
}

/* add media query for growing and shrinking */
@media (max-width: 600px) {
  .img {
    flex: 1 1 auto;
  }
}

<section class="imgrid">
  <div class="img">
    <img src="http://via.placeholder.com/500x500" />
  </div>
  <div class="img">
    <img src="http://via.placeholder.com/500x500" />
  </div>
</section>