或者你可以使用justify-content: flex-end

.main { display: flex; }
.c { justify-content: flex-end; }

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

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

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

将以下CSS类添加到样式表中:

.my-spacer {
    flex: 1 1 auto;
}

在左边的元素和你想要右对齐的元素之间放置一个空元素:

<团队类=“我的间隔”></span>

基于TetraDev回答的示例代码

右图: * { 轮廓:0.4 px红色虚线; ｝ .main { 显示:flex; flex-direction:行; 对齐项目:中心; ｝ h1 { flex-basis: 100%; ｝ img { 边距:0 5px; 高度:30 px; ｝ < div class = "主" > <标题>安全支付h1 > < / < img src = " https://i.stack.imgur.com/i65gn.png " > < img src = " https://i.stack.imgur.com/i65gn.png " > < / div >

左图:

* { 轮廓:0.4 px红色虚线; ｝ .main { 显示:flex; flex-direction:行; 对齐项目:中心; ｝ h1 { flex-basis: 100%; text-align:正确; ｝ img { 边距:0 5px; 高度:30 px; ｝ < div class = "主" > < img src = " https://i.stack.imgur.com/i65gn.png " > < img src = " https://i.stack.imgur.com/i65gn.png " > <标题>安全支付h1 > < / < / div >

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

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

很容易

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