使用CSS Flexbox堆叠图像

Question

我正在学习使用CSS flexbox，我想在左边渲染一个大图像，在另一个顶部渲染两个小图像。如何使用CSS flexbox执行此操作？

＆＃13;

＆＃13;

<div class="container">
      <img class="image1" src="#" alt="null">
      <img class="image1" src="#" alt="null">
      <img class="image3" src="#" alt="null">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我会这样做：

＆＃13;

＆＃13;

public IQueryable<WorkItemDTO> GetAllWorkItem()
    {
        //Return all the work items that the user owns or has been assigned as a resource.
        var query = MappedDomainManager.QueryEntity().Where(x => x.OwnerId == UserProfileId || x.Resources.Where(r => r.AssignedResourceId == UserProfileId).Count() > 0);

        return query.Project().To<WorkItemDTO>();
    }

＆＃13;

.container {
     display: flex;
}
.side {
     display: flex;
     flex-direction: column;
}
.image {
     display: block;
     margin: 5px;
}

＆＃13;

＆＃13;

＆＃13;