CSS Flex 左边一个大div，右边两个小div

Question

我知道我可以使用 css float 轻松实现这种布局，这是我现在让 div 拥有布局的当前方式。但是，我正在尝试重新编码并将其更改为 flex 对齐方式。

这是我的标记:

<div id="the-posts">
    <div class="the-post-inner">
        <a href="#">
            <div class="image" style="background-image: url(https://www.dike.lib.ia.us/images/sample-1.jpg/image);"></div>
            <div class="content"><h2>Post 1</h2></div>
        </a>
        <a href="#">
            <div class="image" style="background-image: url(https://www.dike.lib.ia.us/images/sample-1.jpg/image);"></div>
            <div class="content"><h2>Post 2</h2></div>
        </a>
        <a href="#">
            <div class="image" style="background-image: url(https://www.dike.lib.ia.us/images/sample-1.jpg/image);"></div>
            <div class="content"><h2>Post 3</h2></div>
        </a>        
    </div>
</div>

这是我的 CSS:

.the-post-inner {
    clear: both;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    align-content: flex-start;
}

.the-post-inner a {
    margin-bottom: 4%;
}

.the-post-inner a .image {
      padding-bottom: 60%;
}

.the-post-inner a .content {
      padding: 20px;
}

.the-post-inner a .content h2 {
      margin: 0;
}

.the-post-inner a:first-child {
    flex: 0 0 60%;
    margin-right: 4%;
}

.the-post-inner a:not(:first-child) {
    margin-right: 0;
    flex: 0 0 36%;
    align-self: flex-start;

    overflow: hidden;
    float: left;
    display: block;
}

我根据其他帖子中的答案尝试了几种代码，但我似乎无法完成这项工作。

提前感谢您的建议。

编辑:

我想知道是否有一种方法可以在不更改当前标记的情况下实现此目的，即不将另一个 div 中的左侧帖子与另一个容器中的右侧帖子分开。

https://jsfiddle.net/pextb1of/

Answer 1

我只是做了一些修复。也许会对你有所帮助。

.the-post-inner {
    clear: both;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    align-content: flex-start;
    flex-direction: column;
    height: 100px;
    border: 1px solid #000;
}

a {
    /*border: 1px solid #000;*/
    margin-bottom: 4%;
    /*padding: 20px;*/
}

.the-post-inner {
    flex: 0 0 60%;
    margin-right: 4%;
}

.sec-inner {
    margin-right: 0;
    flex: 0 0 36%;
    align-self: flex-start;
    flex-direction: column;

    overflow: hidden;
    float: left;
    display: flex;
}



#the-posts{
  display: flex;
  flex-direction: row;
}

<div id="the-posts">
    <div class="the-post-inner">
        <a href="#">Post 1</a>
        
    </div>
    <div class="sec-inner">
        <a href="#">Post 2</a> 
        <a href="#">Post 3</a>
    </div>
</div>