html - 带有图像的 Flexbox 列

Question

我正在尝试让 2 张图像跨越旁边图像的整个高度。有这样做的 flex 盒方式吗？我正在尝试使用 flexbox-direction: column 但我遇到的问题是 2 个图像跨越图像的两倍，而我希望它们填充单个图像的空间。

https://jsfiddle.net/nLsa4oqc/

.wrapper {
  display: flex;
}

.first {
  flex: 1;
}

.second {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.second-a {
  flex: 1;
}

.second-b {
  flex: 1;
}

<div class="wrapper">
  <div class="first">
    <img src="https://sarahannephoto.files.wordpress.com/2015/01/devyn_015.jpg?w=1008" alt="">
  </div>

  <div class="second">
    <div class="second-a">
      <img src="https://sarahannephoto.files.wordpress.com/2015/01/devyn_015.jpg?w=1008" alt="">
    </div>
    <div class="second-b">
      <img src="https://sarahannephoto.files.wordpress.com/2015/01/devyn_015.jpg?w=1008" alt="">
    </div>
  </div>
</div>

Answer 1

您可以使用 flex属性(property)，像这样:

fiddle

.wrapper {
  display: flex;
}

.first {
  flex: 2;
}

.second {
  flex: 1;
}

img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

<div class="wrapper">
  <div class="first">
    <img src="https://sarahannephoto.files.wordpress.com/2015/01/devyn_015.jpg?w=1008" alt="">
  </div>

  <div class="second">
    <div class="second-a">
      <img src="https://sarahannephoto.files.wordpress.com/2015/01/devyn_015.jpg?w=1008" alt="">
    </div>
    <div class="second-b">
      <img src="https://sarahannephoto.files.wordpress.com/2015/01/devyn_015.jpg?w=1008" alt="">
    </div>
  </div>
</div>