如果你需要一个项目左对齐(如标题)，但多个项目右对齐(如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)

如果你需要一个项目左对齐(如标题)，但多个项目右对齐(如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)

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

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

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

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

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