Wie richtig platzieren Blöcke mit flex (CSS) Ergebnis wie in meinem Mockup zu haben

Question

Ich brauche Anzeigenblock unter Bildblöcken zu platzieren (wie in dem Mock-up), und ich verstehe nicht, wie man Setzen Sie es ab. Wenn ich den Anzeigenblock hineingelegt habe, sind die Bildblöcke nicht an diesem Block ausgerichtet. Kann mir jemand Rat geben?

Ich benutze Jade mit Stylus. Hier ist mein Code:

block header-bottom 
    .main 
     - for (var i = 0; i < 7; ++i) { 
      if i == 0 
       .main__post_first 
        img.main__banner.main__banner_big(src="../source/images/main-image.png" alt="foo") 
      else 
       .main__post 
        img.main__banner.main__banner_small(src="../source/images/main-image.png" alt="foo") 
     - } 
    //- .main 

Und hier sind meine Stile:

.main 
    display -moz-box  
    display -ms-flexbox 
    display -webkit-box  
    display -webkit-flex 
    display flex 
    flex-direction row 
    flex-wrap wrap 
    justify-content flex-start 
    align-items flex-start 
    align-content flex-start 
    margin-top 10px 
    &__adv 
     width 160px 
     height 220px 
     border 1px solid black 
     box-sizing border-box 
    &__post 
     width auto 
     height: 48px 
     margin-right 5px 
     &_first 
      width 100% 
      height 202px 
      margin-bottom 5px 
    &__post:nth-child(5) 
     flex-grow 2 
     &_nomargin 
      margin-right 0 
      height 52px 
    &__banner 
     width 100% 
     &_small 
      height 48px 
      width auto 
     &_big 
      height 202px 

Und das ist, was ich auf Browser haben bereits:

Answer 1

*{ 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
.wrap{ 
 
    width: 551px; 
 
} 
 
.ad-block{ 
 
    border: 2px solid #000; 
 
    float: right; 
 
    height: 320px; 
 
    margin-bottom: 10px; 
 
    width: 220px; 
 
} 
 
.block{ 
 
    border: 2px solid #000; 
 
    float: left; 
 
    height: 100px; 
 
    margin: 0 10px 10px 0; 
 
    width: 100px; 
 
}

<div class="wrap"> 
 
    <div class="ad-block"> 
 
<span>Ad block</span> 
 
    </div> 
 
    <div class="block"><span>image block</span></div> 
 
    <div class="block"><span>image block</span></div> 
 
    <div class="block"><span>image block</span></div> 
 
    <div class="block"><span>image block</span></div> 
 
    <div class="block"><span>image block</span></div> 
 
    <div class="block"><span>image block</span></div> 
 
    <div class="block"><span>image block</span></div> 
 
    <div class="block"><span>image block</span></div> 
 
    <div class="block"><span>image block</span></div> 
 
    <div class="block"><span>image block</span></div> 
 
    <div class="block"><span>image block</span></div> 
 
    <div class="block"><span>image block</span></div> 
 
    <div class="block"><span>image block</span></div> 
 
    <div class="block"><span>image block</span></div> 
 
</div>