Question

我希望在我的网站中实现两个图像，只要屏幕比600px宽，但是当宽度较小时（例如在智能手机上）会崩溃，这将是并排显示的。 / p>

t2 <- sqlquery(db2,paste0("select * from table2 where [Serial no] IN (",paste(r1,collapse=", "),") ",sep =""))

.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的{{1}}会阻止这种情况发生，因为图像将缩放为相同的尺寸并分享线条的宽度。

我添加了媒体查询，但我不知道该怎么做。理想情况下，我只是删除.img但我不认为这是可能的。

如何在不恢复使用flex: 1;的情况下实现此效果？我的意思是柔性包装是一种非常优雅的做事方式，我认为有一种非常自然的方法来实现这一目标吗？

Answer 1

如果屏幕小于600px，您可以添加媒体查询。演示：

＆＃13;

.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;
  }
}

＆＃13;

<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>

＆＃13;

Answer 2

您是否可以删除＆＃39; max-width：100％;＆＃39;从图像或你根本不能改变任何风格？

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

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

2 个答案: