Flexbox：屏幕太小时折叠 - 如何？答案

【问题标题】：Flexbox: Collapse When Screen Too Small - How To?Flexbox：屏幕太小时折叠 - 如何？
【发布时间】：2018-01-14 15:26:27
【问题描述】：

我想在我的网站中实现两个图像，只要屏幕宽度大于 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 是一种非常优雅的做事方式，我认为有一种非常自然的方式可以实现这一点？

【问题讨论】：

.img{ flex: 1; margin: 10px; } 或 .img{ flex: 1; /* margin: 10px; */ min-width: 600px; }

标签： html css responsive-design flexbox

【解决方案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>

【讨论】：

【解决方案2】：

你能去掉那个'max-width: 100%;'吗从图像中还是您根本无法更改任何样式？

一旦没有足够的空间将它们放在一条线上，删除就会折叠它们。

【讨论】：