右对齐flex项？ [英] Right-aligning flex item?

问题描述

有没有更多的flexbox-ish方法来对齐联系人比使用 position：absolute ？

Is there a more flexbox-ish way to right-align "Contact" than to use position: absolute?

http://jsfiddle.net/vqDK9/

HTML ：

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

CSS：

.main { display: flex; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { flex: 1; text-align: center; }
.c { position: absolute; right: 0; }

推荐答案

更灵活的方法是使用 auto 左边距（flex items treat auto marginins a>与在块格式化上下文中使用时不同）。

A more flex approach would be to use an auto left margin (flex items treat auto margins a bit differently than when used in a block formatting context).

.c {
    margin-left: auto;
}

更新了小提琴

这篇关于右对齐flex项？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！