html - 使用 flexbox 创建具有各种尺寸的响应式图像网格

Question

我正在尝试创建一个基于 flexbox 的设计，宽高比为 16:9。我想创建一个类似于所附图片的设计，但我不确定如何创建最后一列。此外，我想在设计中引入响应式行为。

代码笔:http://codepen.io/anon/pen/xVdLJv

HTML

<div class="flex_container">
  <div class="flex_group__1">
    <img src="holder.js/460x670" />
    <img src="holder.js/460x408" />
  </div>
  <div class="flex_group__2">
    <img src="holder.js/645x813">
    <img src="holder.js/645x265">
  </div>
  <div class="flex_group__3">
    <img src="holder.js/808x330"/>
    <img src="holder.js/452x748"/>
    <img src="holder.js/356x748"/>
  </div>
</div>

CSS

.flex_group__1, .flex_group__2, .flex_group__3, .flex_container {
  display: flex;
}

.flex_container {
  flex-direction: row;
}

.flex_group__3 {
  flex-direction: row wrap;
  justify-content: flex-end;
}

.flex_group__1, .flex_group__2 {
  flex-direction: column;
}

Answer 1

您在 flex_group__3 中添加另一个 flex 组

已更新 codepen

注意，flex_group__3 需要是列

CSS(规则已更新)

.flex_group__1, .flex_group__2, .flex_group__3, .flex_group__3_inner_bottom, .flex_container {
  display: flex;
}

.flex_group__1, .flex_group__2, .flex_group__3 {
  flex-direction: column;
}

HTML(标记更新/添加)

<div class="flex_group__3">
  <img src="holder.js/808x330"/>
  <div class="flex_group__3_inner_bottom">
    <img src="holder.js/452x748"/>
    <img src="holder.js/356x748"/>
  </div>
</div>