title: How to align inline-block elements inside flex box?
body: <p>I have an outer <code>div</code> 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 <code>&amp;nbsp;</code> spaces but is there a way to directly place the two ads on either sides of the flex box?  I tried using <code>position:right</code> and <code>float:right;</code> properties but these didn't work.</p>
  
  <p>Here's my code:</p>
  
  <pre><code>&lt;!---==OUTER DIV==--&gt;
  &lt;div id="content-flex" style="display:flex;"&gt;
  
  
      &lt;!--====LEFT SIDE AD====--&gt;
  
      &lt;div style="display:inline-block; position:left;"&gt;
          &lt;span style="color:white;"&gt;Advertisement&lt;/span&gt;&lt;br/&gt;
          &lt;a href="http://www.bmw.com.au" target="_blank"&gt;
              &lt;img src="https://media.giphy.com/media/zuTk53kSNOJJC/giphy.gif" /&gt;
          &lt;/a&gt;&lt;br/&gt;
      &lt;/div&gt;
  
      &lt;!--HERE I HAVE TO USE A LOT OF &amp;nbsp;--&gt;
  
  
  
      &lt;!--====MIDDLE : CONTEN====T--&gt;
  
      &lt;div style="display:inline-block;"&gt;
  
          &lt;p&gt;Loreum Ipsum...&lt;/p&gt;
  
      &lt;/div&gt;
  
      &lt;!--HERE I HAVE TO USE A LOT OF &amp;nbsp;--&gt;
  
  
  
      &lt;!--====RIGHT SIDE AD====--&gt;
  
      &lt;div style="display:inline-block; position:right;"&gt;
          &lt;span style="color:white;"&gt;Advertisement&lt;/span&gt;&lt;br/&gt;
          &lt;a href="http://www.bmw.com.au" target="_blank"&gt;
              &lt;img src="https://media.giphy.com/media/zuTk53kSNOJJC/giphy.gif" /&gt;
          &lt;/a&gt;
  
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>This is how the page looks right now:  </p>
  
  <p><a href="https://i.stack.imgur.com/A8CgQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/A8CgQ.png" alt="enter image description here"></a></p>