如何对齐Flex框内的内嵌块元素？

我有一个外部div这是一个弹性盒。在它里面，会有三个元素作为内联块：左边和右边两个广告，以及两个广告之间的内容。我希望广告能够左右对齐，然后在中间处理我的内容，就好像广告是页面的边缘（我希望这很明显）。我需要使用很多 空间，但是有没有办法直接在柔性盒两侧放置两个广告？我尝试使用position:right和float:right;属性，但这些不起作用。如何对齐Flex框内的内嵌块元素？

这里是我的代码：

<!---==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>

这是页面的外观现在：

来源

2017-06-19 progyammer

做这些元素必须是inline-block的？你不能只使用flex模型来获得所需的结果吗？ – Obsidian

@Obsidian如果我不让它们成为'inline-block'，它们不会分开吗？我希望他们在同一条线上。 – progyammer

'位置：右'是无效的，浮动的孩子没有任何效果。您应该[阅读如何使用flexbox]（https://css-tricks.com/snippets/css/a-guide-to-flexbox/） – chazsolo

如果您只是在中间div上设置flex: 1，它会占用所有可用空间并将右侧广告推送到右侧。同样，一旦您在父元素float上设置display: flex属性将无法在子元素上工作。

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

来源

2017-06-19 15:46:06

我可以在中间div中添加一些填充以将其与广告隔开。这工作就像一个魅力！ – progyammer

添加下面的样式到你的外div。

justify-content: space-between;

或

justify-content: space-around;

Look here for more alignment options for flex。

来源

2017-06-19 15:46:06

只有一个疑问：中间div在中间对齐。如何使之合理？ – progyammer

你是什么意思“有道理”？中间div的期望位置是什么？ –

这是它如何能够使用柔性盒模型进行管理：

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

来源

2017-06-19 15:52:46 Obsidian

如何对齐Flex框内的内嵌块元素？

回答

相关问题