如何对齐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 -->
<!--====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>
这是页面的外观现在:
如果您只是在中间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>
我可以在中间div中添加一些填充以将其与广告隔开。这工作就像一个魅力! – progyammer
添加下面的样式到你的外div
。
justify-content: space-between;
或
justify-content: space-around;
只有一个疑问:中间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>
做这些元素必须是inline-block的?你不能只使用flex模型来获得所需的结果吗? – Obsidian
@Obsidian如果我不让它们成为'inline-block',它们不会分开吗?我希望他们在同一条线上。 – progyammer
'位置:右'是无效的,浮动的孩子没有任何效果。您应该[阅读如何使用flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) – chazsolo