block elements inside flex box?

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 &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>

This is how the page looks right now:

---

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>

---

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 .

---

这是如何使用弹性盒模型进行管理的：

#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>

链接地址: http://www.djcxy.com/p/13196.html

上一篇: 包装盒问题

下一篇: 在弹性盒内部块元素？