你可以这样做:

.bar { display: flex; background: #B0BEC5; } .l { width: 50%; flex-shrink: 1; display: flex; } .l-content { background: #9C27B0; } .m { flex-shrink: 0; } .m-content { text-align: center; background: #2196F3; } .r { width: 50%; flex-shrink: 1; display: flex; flex-direction: row-reverse; } .r-content { background: #E91E63; } <div class="bar"> <div class="l"> <div class="l-content">This is really long content. More content. So much content.</div> </div> <div class="m"> <div class="m-content">This will always be in the center.</div> </div> <div class="r"> <div class="r-content">This is short.</div> </div> </div>

虽然我在这个问题上可能晚了，但所有这些解决方案似乎都很复杂，而且根据你所面临的情况可能不会起作用。

非常简单，只需要用position: absolute来包装你想要居中的组件，而让其他两个组件用justify-content: space来分隔，如下所示:

CSS:

.container { display: flex; justify-content: space-between; align-items: center; background-color: lightgray; } .middle { position: absolute; margin-left: auto; margin-right: auto; /* You should adapt percentages here if you have a background ; else, left: 0 and right: 0 should do the trick */ left: 40%; right: 40%; text-align: center; } /* non-essential, copied from @Brian Morearty answer */ .element { border: 1px solid #ccc; background-color: lightgreen; } p { margin: 5px; padding: 5px; } <div class="container"> <p class="element">First block</p> <p class="middle element">Middle block</p> <p class="element">Third THICC blockkkkkkkkk</p> </div>

这里有一个答案，使用网格而不是flexbox。这个解决方案不需要像接受的答案那样在HTML中添加额外的孙子元素。即使一边的内容足够长，溢出到中间，它也能正常工作，不像2019年的网格答案。

这个解决方案没有做的一件事是显示省略号或隐藏在中心框中的额外内容，如问题中所述。

section { display: grid; grid-template-columns: 1fr auto 1fr; } section > *:last-child { white-space: nowrap; text-align: right; } /* not essential; just for demo purposes */ section { background-color: #eee; font-family: helvetica, arial; font-size: 10pt; padding: 4px; } section > * { border: 1px solid #bbb; padding: 2px; } <section> <div>left</div> <div>center</div> <div>right side is longer</div> </section> <section> <div>left</div> <div>center</div> <div>right side is much, much longer</div> </section> <section> <div>left</div> <div>center</div> <div>right side is much, much longer, super long in fact</div> </section>

我想要在问题中显示的确切结果，我结合了gamliela和Erik Martín Jordán的答案，它最适合我。

.parent {
    display: flex;
    justify-content: space-between;
}

.left, .right {
   flex-grow: 1;
   flex-basis: 0;
}

.right {
   display: flex;
   justify-content: flex-end;
}

Michael Benjamin给出了一个不错的答案，但没有理由不能/不应该进一步简化:

.container {
  display: flex;
}

.box {
  flex: 1;
  display: flex;
  justify-content: center;
}

.box:first-child { justify-content: left; }

.box:last-child  { justify-content: right;  }

和html

<div class="container">
  <div class="box">short text</div>
  <div class="box">centered tex</div>
  <div class="box">loooooooooooooooong text</div>
</div>

关键是要使用弹性基准。那么解决方案很简单:

.parent {
    display: flex;
    justify-content: space-between;
}

.left, .right {
   flex-grow: 1;
   flex-basis: 0;
}

CodePen可以在这里找到。