如何正确对齐Flex项目？ [英] How to Right-align flex item?

问题描述

有没有更多的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>

http://jsfiddle.net/vqDK9/

解决方案

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屋！