フレックスアイテムが並べて配置されていません（つまり、間隔が空いています）？

Question

フレックスを使ってイメージ（紫色）と内容（黄色）を並べて整列させることができます。しかし、私は間に余分なスペースを取得していると右の画像を投げている。

はこちらをご覧ください：http://imgur.com/a/nl0ZJ

することになっています：

• 画像は、次の黄色のdivは、60％の幅でなければなりません黄色のdiv
• に青のdiv内にある必要があります（これらは、フレックスですアイテム）

私はパディングとマージンをチェックしましたが、それは私のために働いていません。何か案は？

は、ここでは一つだけとなりp/imgラップdivで、display: flexは、その直接の子孫フレックスアイテムを作る

@media screen and (min-width: 599px) { 
    .sec-1 h2 { 
     font-size: 1.2em; 
     background-color: green; 
    } 

    .sec-1 p { 
     font-size: 1.1em; 
     width: 50%; 
     background-color: yellow; 
    } 

    .sec-1 .phone-img { 
     position: relative; 
     top: 10%; 
     left: 30%; 
     background-color: purple; 

    } 
    .download-btns { 
     position: relative; 
     right: 25%; 
     background-color: orange; 
    } 

    .sec-1 .sales-copy { 
     width: 50%; 
    } 


    .flex-box { 
     display: flex; 
      justify-content: flex-end; 

    } 

} 

Answer 1

ので、HTML

<div class="sec-1"> 
    <h2>Introducing 'Keeva' world's smartest assistant.</h2> 
    <div class="flex-box"> 
     <div> 
      <p class="sales-copy">Keeva smartphone app helps you organize your work schedule, meetings, project deadlines and much more.</p> 
         <!-- Download Buttons --> 
        <img class="download-btns" src="img/playstore-1.png"> 
        <img class="download-btns" src="img/iphone-1.png"> 
     </div> 
     <!-- Phone 0 image --> 
     <img class="phone-img" src="img/iphone-cut.png" alt="phone image">   
    </div> 
</div> 

CSSです。

フレックスアイテムの場合、imgは正常に動作しないため、このdivラッパーをimgに移動すると意図したとおりに流れます。

私もそう黄色要素が60％となり、divラッパーにflex-grow: 1を追加し、それは、残りのスペースを取るflex-basis: 60%にwidth: 50%を変え。コメントボタンは右

.sec-1 h2 { 
 
    font-size: 1.2em; 
 
    background-color: green; 
 
} 
 

 
.sec-1 p { 
 
    margin: 0; 
 
    font-size: 1.1em; 
 
    background-color: yellow; 
 
} 
 

 
.sec-1 .phone-img { 
 
    position: relative; 
 
    top: 10%; 
 
    left: 30%; 
 
    background-color: purple; 
 
} 
 

 
.flex-box-outer { 
 
    display: flex; 
 
} 
 
.flex-box-outer > div { 
 
    flex-grow: 1; 
 
} 
 
.flex-box-inner { 
 
    flex-basis: 60%; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
}

<div class="sec-1"> 
 
    <h2>Introducing 'Keeva' world's smartest assistant.</h2> 
 
    <div class="flex-box-outer"> 
 
    <div class="flex-box-inner"> 
 
     <p class="sales-copy">Keeva smartphone app helps you organize your work schedule, meetings, project deadlines and much more.</p> 
 
    <!-- Download Buttons --> 
 
     <div> 
 
     <img class="download-btns" src="http://placehold.it/100x50/?text=playstore"> 
 
     <img class="download-btns" src="http://placehold.it/100x50/?text=iphone"> 
 
     </div> 
 
    </div> 
 
    
 
    <!-- Phone 0 image --> 
 
    <div> 
 
     <img class="phone-img" src="http://placehold.it/100x50/?text=iphone cut" alt="phone image"> 
 
    </div> 
 
    </div> 
 
</div>

に黄色素子と画像の下に配置されるように、外側と内側のフレキシボックスラッパーに変更

に基づいて更新

---