使用flexbox创建各种大小的响应式图像网格

Question

我正在尝试创建一个基于Flexbox的设计，其宽高比为16：9。我想创建一个类似于附加图像的设计，但我不知道如何创建最后一列。此外，我想在设计中引入响应行为。

Codepen：http://codepen.io/anon/pen/xVdLJv

HTML

Hello, Tom
Lang: en_GB
Englishman { _language: 'en_GB', _name: 'Tom' }

CSS

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

Answer 1

您在flex_group__3

中添加了另一个灵活组

更新了codepen

注意，flex_group__3必须为column

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>

Answer 2

所以，这让我有点疯狂，所以我有了它。您还可以在CodePen上查看我的搜索结果。这里的容器里面有很多容器，这意味着要复制这个确切的布局，并且可能不会对其他任何东西都很好，但是我已经接近它并且它的响应能力很强。 （那里只有两个媒体查询，但你可以做其他查询。）

＆＃13;

＆＃13;

body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
.flex_container {
  display: flex;
  font-size: 0;
  justify-content: space-between;
}
.flex_container > .flex_group {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.flex_container > .flex_group:first-child {
  width: 460px;
}
.flex_container > .flex_group:nth-child(2) {
  width: 645px;
}
.flex_container > .flex_group:nth-child(3) {
  width: 808px;
}
.flex_group img {
  padding: 10px;
  height: auto;
  width: 100%;
}
.flex_group > .flex_group:last-child img:first-child {
  width: 50%;
}
.flex_group > .flex_group:last-child img:last-child {
  width: 50%;
}
@media only screen and (max-width: 399px) {
  .flex_group > .flex_group:last-child img {
    width: 100%!important;
  }
}
@media only screen and (max-width: 599px) {
  .flex_container {
    flex-wrap: wrap;
    justify-content: center;
  }
}
/* fallback for earlier versions of Firefox */

@supports not (flex-wrap: wrap) {
  .flex_container {
    display: block;
  }
  .flex_container img {
    display: inline-block;
    vertical-align: top;
  }
}

＆＃13;

<div class="flex_container">
  <div class="flex_group">
    <img src="http://placehold.it/460x670" />
    <img src="http://placehold.it/460x408" />
  </div>
  <div class="flex_group">
    <img src="http://placehold.it/645x813">
    <img src="http://placehold.it/645x265">

  </div>
  <div class="flex_group">
    <div class="flex_group">
      <img src="http://placehold.it/808x330" />
    </div>
    <div class="flex_group">
      <img src="http://placehold.it/404x748" />
      <img src="http://placehold.it/404x748" />
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;