创建包含特定模式图像的响应式 flexbox 布局

Question

我正在尝试使用 flexbox 创建包含图像的响应式布局。我已经实现了我想要的模式，但它没有响应。以下是模式：

https://jsfiddle.net/wcep5tuk/16/embedded/result/

即使模式看起来不错，但在调整窗口大小时，一切都崩溃了。这是我的 css：

.my-container {
  margin: 0 auto;
  height: auto;
  max-width: 70%;
  display: flex;
}

.left-flex-container {
  width: 59.4%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
}

.right-flex-container {
  width: 35%;
  height: auto;
}

div.left-flex-container>img,
div.right-flex-container>img {
  max-width: 100%;
  height: auto;
  border: 1px solid #000;
}

还有我的html

<div class="my-container">
  <div class="left-flex-container">
     <img src="http://via.placeholder.com/789x330" alt="">
     <img src="http://via.placeholder.com/306x228" alt="">
     <img src="http://via.placeholder.com/481x228" alt="">
  </div>
  <div class="right-flex-container">
     <img src="http://via.placeholder.com/440x565" alt="">
  </div>
</div>

https://jsfiddle.net/wcep5tuk/16/

任何帮助将不胜感激。

Answer 1

通过查看您的代码，我假设您需要这些框来响应（拉伸或收缩）。

这里是 CSS：

.my-container {
    margin: auto;
    width: 70%;
    display: flex;
  }

  .left-flex-container {
    display: flex;
    flex-flow: column wrap;
  }

  .right-flex-container {
    display: flex;
    flex-flow: column wrap;
  }

  div.left-flex-container>img,
  div.right-flex-container>img {
    max-width: 100%;
    border: 1px solid #000;
  }

在这种情况下，您不需要为每个框添加高度。 Div 或框内的图像设置框/总高度。 固定宽度会导致框之间有空间，使其看起来反​​应迟钝。

如果您想在小屏幕上将右侧部分移动到左侧部分下方，则必须在 .my-container 类中使用带有 flex-flow:column wrap 的媒体规则。

记住：Flex-Box 仅适用于父子情况，不适用于父子情况！

https://jsfiddle.net/7pmL9wpv/

希望这会有所帮助！