如果你想使用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上的一个演示，允许您快速尝试上述操作。

给你。在flex容器上设置justify-content: space-between。

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

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

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

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

很容易

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

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

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