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

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

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

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

很容易

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

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

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

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

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

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

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

'justify-content: flex-end'在价格框容器内工作。

.price-box {
    justify-content: flex-end;
}

我发现添加'justify-content: flex-end'到flex容器解决了问题，而'justify-content: space-between'没有做任何事情。