左边:自动工作良好。但干净的柔性盒解决方案将在主类之间的空间。如果有两个或两个以上的元素，那么两者之间的间隔就很好。我也为单个元素添加了一个解决方案。

.main { display: flex; justify-content: space-between; } .a, .b, .c { background: #efefef; border: 1px solid #999; padding: 0.25rem; margin: 0.25rem;} .b { flex: 1; text-align: center; } .c-wrapper { display: flex; flex: 1; justify-content: flex-end; } .c-wrapper2 { display: flex; flex: 1; flex-flow: row-reverse; } <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> <div class="main"> <div class="a"><a href="#">Home</a></div> <div class="c"><a href="#">Contact</a></div> </div> <div class="main"> <div class="c-wrapper"> <a class="c" href="#">Contact</a> <a class="c" href="#">Contact2</a> </div> </div> <div class="main"> <div class="c-wrapper2"> <span class="c">Contact</span> <span class="c">Contact2</span> </div> </div>

很容易

.main {
    display: flex;
    flex-direction:row-reverse;
}

更灵活的方法是使用自动左距(灵活项对待自动左距与在块格式化上下文中使用时略有不同)。

.c {
    margin-left: auto;
}

更新的小提琴:

.main { display: flex; } .a, .b, .c { background: #efefef; border: 1px solid #999; } .b { flex: 1; text-align: center; } .c {margin-left: auto;} <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> <h1>Problem</h1> <p>Is there a more flexbox-ish way to right align "Contact" than to use position absolute?</p>

对于那些使用Angular和Flex-Layout的人，在flex-item容器上使用以下命令:

<div fxLayout=“row” fxLayoutAlign=“flex-end”>

查看fxLayoutAlign文档和完整的fxLayout文档。

您也可以使用填充物来填充剩余的空间。

<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="filler"></div>
    <div class="c"><a href="#">Contact</a></div>
</div>

.filler{
    flex-grow: 1;
}

我已经更新了3个不同版本的解决方案。这是因为讨论了使用额外填充元素的有效性。如果您运行剪切的代码，您会看到所有解决方案都做不同的事情。例如，在项目b上设置填充类将使该项填充剩余的空间。这样做的好处是没有不可点击的“死”空间。

<div class="mainfiller"> <div class="a"><a href="#">Home</a></div> <div class="b"><a href="#">Some title centered</a></div> <div class="filler"></div> <div class="c"><a href="#">Contact</a></div> </div> <div class="mainfiller"> <div class="a"><a href="#">Home</a></div> <div class="filler b"><a href="#">Some title centered</a></div> <div class="c"><a href="#">Contact</a></div> </div> <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> <style> .main { display: flex; justify-content: space-between; } .mainfiller{display: flex;} .filler{flex-grow:1; text-align:center} .a, .b, .c { background: yellow; border: 1px solid #999; } </style>

如果你想使用flexbox，你应该能够，通过这样做(在容器上display: flex，在项目上flex: 1，在.c上text-align: right):

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

.．.或者(甚至更简单)，如果项目不需要满足，你可以在容器上使用justify-content: space-between，并完全删除文本对齐规则:

.main { display: flex; justify-content: space-between; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }

下面是Codepen上的一个演示，允许您快速尝试上述操作。