如何正确对齐Flex项目? [英] How to Right-align flex item?
本文介绍了如何正确对齐Flex项目?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
有没有更多的flexbox-ish方式来对齐Contact而不是使用 position:absolute
?
< pre class =snippet-code-css lang-css prettyprint-override>
.main {display:flex; } .a,.b,.c {background:#efefef;边界:1px固体#999; } .b {flex:1; text-align:center; } .c {position:absolute;正确:0; }
< h2> With title< / h2>< ; div class =main> < div class =a>< a href =#>主页< / a>< / div> < div class =b>< a href =#>部分标题居中< / a>< / div> < div class =c>< a href =#>联系人< / a>< / div>< / div>< h2>无标题< / h2>< div class = 主 > < div class =a>< a href =#>主页< / a>< / div> <! - < div class =b>< a href =#>一些以title居中的< / a>< / div> - > < div class =c>< a href =#>联系人< / a>< / div>< / div>
http:// jsfiddle。 net / vqDK9 /
解决方案
在flex容器上设置 justify-content:space-between
。
.main {display:flex; justify-content:space-between; } .a,.b,.c {background:#efefef;边界:1px固体#999; } .b {text-align:center; }
< h2> With title< / h2>< ; div class =main> < div class =a>< a href =#>主页< / a>< / div> < div class =b>< a href =#>部分标题居中< / a>< / div> < div class =c>< a href =#>联系人< / a>< / div>< / div>< h2>无标题< / h2>< div class = 主 > < div class =a>< a href =#>主页< / a>< / div><! - < div class =b>< a href = #>部分标题居中< / a>< / div> - > < div class =c>< a href =#>联系人< / a>< / div>< / div>
Is there a more flexbox-ish way to right-align "Contact" than to use position: absolute
?
.main { display: flex; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { flex: 1; text-align: center; }
.c { position: absolute; right: 0; }
<h2>With title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<div class="b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<!--<div class="b"><a href="#">Some title centered</a></div>-->
<div class="c"><a href="#">Contact</a></div>
</div>
解决方案
Here you go. Set justify-content: space-between
on the flex container.
.main {
display: flex;
justify-content: space-between;
}
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { text-align: center; }
<h2>With title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<div class="b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<!-- <div class="b"><a href="#">Some title centered</a></div> -->
<div class="c"><a href="#">Contact</a></div>
</div>
这篇关于如何正确对齐Flex项目?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文