在弹性盒内部块元素？

我有一个外部div是一个弹性盒子。 在它里面，会有三个元素作为内联块：左边和右边两个广告，以及两个广告之间的内容。 我希望广告能够左右对齐，然后在中间处理我的内容，就好像广告是页面的边缘（我希望这很明显）。 我不得不使用很多  空间，但有没有办法将两个广告直接放置在弹性盒的两侧？ 我尝试过使用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>

这就是页面现在的样子：

---

如果您只在中间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>

---

将以下样式添加到外部div 。

justify-content: space-between;

要么

justify-content: space-around;

在这里寻找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/13195.html

上一篇: block elements inside flex box?

下一篇: Is it possible to style anonymous flex items explicitly?