Flexbox：当屏幕太小时折叠-如何？-Flexbox:CollapseWhenScreenTooSmall-HowTo?

I want to implement two images in my website that will be shown side-by-side as long as the screen is wider than, let's say, 600px but collapse when there is less width available (like on a smartphone).

我希望在我的网站中实现两个图像,只要屏幕比600px宽,但是当宽度较小时(例如在智能手机上)崩溃,它将并排显示。

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

.img {
  flex: 1;
}

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

.imgrid has the flex-flow: row wrap so that it will wrap when there's not enough space to display both items on the same line. So the idea here is that it will naturally collapse once there's not enough screen-width available.

.imgrid有flex-flow:row wrap,当没有足够的空间在同一行显示两个项时它会换行。所以这里的想法是,一旦没有足够的屏幕宽度,它就会自然崩溃。

.img's flex: 1; however, stops that from happening as the images will be scaled to be the same size and share the width of the line.

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

I've added a media query but I don't know what to make it do. Ideally I would simply remove the flex: 1 but I don't think that's possible.

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

How do I go about achieving this effect without reverting to the use of px? I mean the flex wrapping is a really elegant way of doing things and I would assume there's a very natural way of achieving this?

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

2 个解决方案

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