フレックスボックス内のインラインブロック要素を整列する方法は？

Question

私は外側がフレックスボックスであるdivです。その中には、左右に2つの広告と、その間にあるコンテンツという3つの要素がインラインブロックとして存在します。私は広告を左右に整列させて、広告がページの余白であるかのように真ん中で自分のコンテンツに取り組んでいきたいです（私はこれがはっきりしていることを望みます）。私は スペースをたくさん使用する必要がありますが、フレックスボックスの両側に2つの広告を直接配置する方法はありますか？ position:rightとfloat:right;のプロパティを使ってみましたが、これらは機能しませんでした。

は、ここに私のコードです：

<!---==OUTER DIV==--> 
<div id="content-flex" style="display:flex;"> 


    <!--====LEFT SIDE AD====--> 

    <div style="display:inline-block; position:left;"> 
     <span style="color:white;">Advertisement</span><br/> 
     <a href="http://www.bmw.com.au" target="_blank"> 
      <img src="https://media.giphy.com/media/zuTk53kSNOJJC/giphy.gif" /> 
     </a><br/> 
    </div> 

    <!--HERE I HAVE TO USE A LOT OF &nbsp;--> 



    <!--====MIDDLE : CONTEN====T--> 

    <div style="display:inline-block;"> 

     <p>Loreum Ipsum...</p> 

    </div> 

    <!--HERE I HAVE TO USE A LOT OF &nbsp;--> 



    <!--====RIGHT SIDE AD====--> 

    <div style="display:inline-block; position:right;"> 
     <span style="color:white;">Advertisement</span><br/> 
     <a href="http://www.bmw.com.au" target="_blank"> 
      <img src="https://media.giphy.com/media/zuTk53kSNOJJC/giphy.gif" /> 
     </a> 

    </div> 

</div> 

このページは、今どのように見えるかです：

Answer 1

中間のdivにちょうどflex: 1を設定すると、すべての空き領域があり、右の広告が右側に移動します。また、親要素でdisplay: flexを設定した後は、子要素ではプロパティが動作しません。float

#content-flex > div:nth-child(2) { 
 
    flex: 1; 
 
}

<div id="content-flex" style="display:flex;"> 
 

 
    <div> 
 
    <span style="color:white;">Advertisement</span> 
 
    <br/> 
 
    <a href="http://www.bmw.com.au" target="_blank"> 
 
     <img src="https://media.giphy.com/media/zuTk53kSNOJJC/giphy.gif" /> 
 
    </a> 
 
    <br/> 
 
    </div> 
 

 
    <div> 
 
    <p>Loreum Ipsum...</p> 
 
    </div> 
 

 
    <div > 
 
    <span style="color:white;">Advertisement</span> 
 
    <br/> 
 
    <a href="http://www.bmw.com.au" target="_blank"> 
 
     <img src="https://media.giphy.com/media/zuTk53kSNOJJC/giphy.gif" /> 
 
    </a> 
 
    </div> 
 

 
</div>

Answer 2

があなたの外divに次のスタイルを追加します。

justify-content: space-between; 

または

justify-content: space-around; 

Look here for more alignment options for flex。

Answer 3

これは、フレックスボックスモデルを使用して管理することができる方法である。

#content-flex, 
 
#AdLft, 
 
#AdRgt{ 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 
.Middle{ 
 
    width:100%; 
 
}

<div id="content-flex"> 
 

 
    <div id="AdLft"> 
 
    <a href="http://www.bmw.com.au" target="_blank"> 
 
     <img src="https://media.giphy.com/media/zuTk53kSNOJJC/giphy.gif" /> 
 
    </a> 
 
    </div> 
 

 
    <div class="Middle"> 
 
    <p>Loreum Ipsum...</p> 
 
    </div> 
 

 
    <div id="AdRgt"> 
 
    <a href="http://www.bmw.com.au" target="_blank"> 
 
     <img src="https://media.giphy.com/media/zuTk53kSNOJJC/giphy.gif" /> 
 
    </a> 
 
    </div> 
 

 
</div>