css，flag布局，左边一个图片，右边一上一下两个图片，效果图是左边图片大小是右边两个图片

可以使用flexbox布局来实现这个效果。以下是一个示例代码：

<style>
  .container {
    display: flex;
    align-items: center;
  }

  .left-image {
    flex: 1;
  }

  .right-images {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
  }

  .right-images img {
    width: 100%;
    margin-bottom: 10px;
  }
</style>

<div class="container">
  <div class="left-image">
    <img src="left-image.jpg" alt="Left Image">
  </div>
  <div class="right-images">
    <img src="top-image.jpg" alt="Top Image">
    <img src="bottom-image.jpg" alt="Bottom Image">
  </div>
</div>

在上述代码中，`.container` 是包含左右两个部分的容器。`.left-image` 和 `.right-images` 分别代表左边和右边的部分。

通过设置 `display: flex`，我们将它们放在同一行，并且使用 `align-items: center` 将它们垂直居中。

`.left-image` 使用 `flex: 1` 来占据剩余空间，使得右边的部分可以靠右排列。

`.right-images` 使用 `display: flex` 和 `flex-direction: column` 将两个图片垂直排列，并使用 `justify-content: space-between` 和 `align-items: flex-start` 来控制它们的对齐方式。

最后，为了确保图片在容器内占据全部空间，我们设置它们的宽度为100%。`margin-bottom: 10px` 是为了在两个图片之间添加一些间距。

你可以将实际的图片路径替换到代码中的 `src` 属性中，以展示真实的图片。