Flexbox的嵌套元素

Question

我试图巢使用Flexbox的得到这个结果的一些因素：

任何人都知道如何去实现这个结果呢？

Answer 1

经过几次尝试，我想我得到了我正在寻找的东西。

body { 
 
    background: skyblue; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
} 
 

 
.wrapper { 
 
    margin: 2%; 
 
} 
 

 
.articles { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -ms-flex-wrap: wrap; 
 
     flex-wrap: wrap; 
 
} 
 

 
.article-card { 
 
    background-color: #FFF; 
 
    box-shadow: 0 4px 4px -4px rg; 
 
} 
 

 
.article-card--big { 
 
    width: calc(50% - 30px); 
 
    margin-right: 30px; 
 
    float: left; 
 
} 
 

 
.article-card--flex { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -ms-flex-flow: row wrap; 
 
     flex-flow: row wrap; 
 
    width: 50%; 
 
} 
 

 
.article-card--landscape { 
 
    width: calc(50% - 30px); 
 
    float: left; 
 
    margin-right: 30px; 
 
    margin-bottom: 30px; 
 
} 
 
.article-card--landscape:nth-child(3), .article-card--landscape:nth-child(4) { 
 
    margin-bottom: 0; 
 
} 
 

 
.card-content { 
 
    display: block; 
 
    padding: 15px; 
 
} 
 

 
.card-img { 
 
    display: block; 
 
    background: #ededed; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
.card-img:before { 
 
    display: block; 
 
    content: ""; 
 
    width: 100%; 
 
    padding-top: 70%; 
 
} 
 
.card-img img { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: -100%; 
 
    bottom: -100%; 
 
    margin: auto 0; 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
img { 
 
    max-width: 100%; 
 
    height: auto; 
 
}

<div class="wrapper"> 
 
    <section class="articles articles-category"> 
 
    <article class="article-card article-card--big"> 
 
     <a href=""> 
 
     <span class="card-img"> <img src="http://www.placehold.it/300x240" alt=""> </span> 
 
     <span class="card-content"> 
 
<span class="title">Dolores é Wyatt: teorias finais para o último episódio de Westworld</span> 
 
     <span class="infos"> 
 
<span class="time">Há 21 horas</span> 
 
     </span> 
 
     </span> 
 
     </a> 
 
    </article> 
 
    <div class="article-card--flex"> 
 
     <article class="article-card article-card--landscape"> 
 
     <a href=""> 
 
      <span class="card-img"> <img src="http://www.placehold.it/300x240" alt=""> </span> 
 
      <span class="card-content"> 
 
<span class="title">Dolores é Wyatt: teorias finais para o último episódio de Westworld</span> 
 
      <span class="infos"> 
 
<span class="time">Há 21 horas</span> 
 
      </span> 
 
      </span> 
 
     </a> 
 
     </article> 
 
     <article class="article-card article-card--landscape"> 
 
     <a href=""> 
 
      <span class="card-img"> <img src="http://www.placehold.it/300x240" alt=""> </span> 
 
      <span class="card-content"> 
 
<span class="title">Dolores é Wyatt: teorias finais para o último episódio de Westworld</span> 
 
      <span class="infos"> 
 
<span class="time">Há 21 horas</span> 
 
      </span> 
 
      </span> 
 
     </a> 
 
     </article> 
 
     <article class="article-card article-card--landscape"> 
 
     <a href=""> 
 
      <span class="card-img"> <img src="http://www.placehold.it/300x240" alt=""> </span> 
 
      <span class="card-content"> 
 
<span class="title">Dolores é Wyatt: teorias finais para o último episódio de Westworld</span> 
 
      <span class="infos"> 
 
<span class="time">Há 21 horas</span> 
 
      </span> 
 
      </span> 
 
     </a> 
 
     </article> 
 
     <article class="article-card article-card--landscape"> 
 
     <a href=""> 
 
      <span class="card-img"> <img src="http://www.placehold.it/300x240" alt=""> </span> 
 
      <span class="card-content"> 
 
<span class="title">Dolores é Wyatt: teorias finais para o último episódio de Westworld</span> 
 
      <span class="infos"> 
 
<span class="time">Há 21 horas</span> 
 
      </span> 
 
      </span> 
 
     </a> 
 
     </article> 
 
    </div> 
 
    </section> 
 
</div>