How to align inline-block elements inside flex box? - html

Question

I have an outer div which is a flex box. Inside it, there will be three elements as inline-block: two advertisements on the left and right, and the content in between. I want the advertisements to be aligned to the left and right and then work on my content in the middle as if the ads were the margins of the page (I hope this is clear). I'm having to use a lot of spaces but is there a way to directly place the two ads on either sides of the flex box? I tried using position:right and float:right; properties but these didn't work.
Here's my code:
<!---==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 -->
<!--====MIDDLE : CONTEN====T-->
<div style="display:inline-block;">
<p>Loreum Ipsum...</p>
</div>
<!--HERE I HAVE TO USE A LOT OF -->
<!--====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>
This is how the page looks right now:

Answer 1

If you just set flex: 1 on middle div it will take all the free space and push right ad to right side. Also once you set display: flex on parent element float property won't work on child elements.
#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

Add the following style to your outer div.
justify-content: space-between;
or
justify-content: space-around;
Look here for more alignment options for flex.

Answer 3

This is how it can be managed using the flex box model:
#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>