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

如果你需要一个项目左对齐(如标题)，但多个项目右对齐(如3个图像)，那么你可以这样做:

h1 {
   flex-basis: 100%; // forces this element to take up any remaining space
}

img {
   margin: 0 5px; // small margin between images
   height: 50px; // image width will be in relation to height, in case images are large - optional if images are already the proper size
}

下面是它的样子(上面的代码片段中只包含了相关的CSS)

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

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

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

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

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

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

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

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

给你。在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>