您可以考虑
flex-grow:1;flex-basis:0%使用left和right元素，然后
text-align在其中对齐内容。我添加了一个额外的包装器，以仅在文本周围保留背景。
诀窍是通过仅删除中间内容并将其均分为左元素和右元素来计算可用空间。
.container { margin: 20px 0; padding-top:10px; background:linear-gradient(#000,#000) center/5px 100% no-repeat; }.row { background-color: lime; display: flex; color: #fff;}.item:not(:nth-child(2)) { flex-basis: 0%; flex-grow: 1;}.item:last-child { text-align: right;}.item span{ background-color: blue; display:inline-block; padding: 16px; height:100%; box-sizing:border-box;}<div > <div > <div ><span>left, slightly longer</span></div> <div ><span>center, this item is much longer</span></div> <div ><span>right</span></div> </div></div>您也可以通过使元素保持关闭来执行相同的操作。只需调整文本对齐即可：
.container { margin: 20px 0; padding-top:10px; background:linear-gradient(#000,#000) center/5px 100% no-repeat; }.row { background-color: lime; display: flex; color: #fff;}.item:not(:nth-child(2)) { flex-basis: 0%; flex-grow: 1;}.item:first-child { text-align: right;}.item span{ background-color: blue; display:inline-block; padding: 16px; height:100%; box-sizing:border-box;}<div > <div > <div ><span>left, slightly longer</span></div> <div ><span>center, this item is much longer</span></div> <div ><span>right</span></div> </div></div>
