を正しく配置するためにどのようにフレックス（CSS）を使用して、ブロックが

Question

は私が（モックアップのように）画像ブロックのうち一部の広告ブロックを配置する必要があり、私のモックアップのように結果を持っている、と私はどのように理解していませんそれを置く。内部に広告ブロックを配置すると、画像ブロックはそのブロックに揃えられません。誰かが私に助言を与えることができる？

私はスタイラスで翡翠を使用しています。ここに私のコードは次のとおりです。

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 

そして、ここでは私のスタイルです：

.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 

そして、これは私はすでにブラウザ上で持っているものです。

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>