想象一下下面的布局，其中圆点代表盒子之间的空间:
[Left box]......[Center box]......[Right box]
当我移除右边的方框时，我希望中间的方框仍然在中间，就像这样:
[Left box]......[Center box].................
如果我移除左边的方框也是一样的。
................[Center box].................
现在，当中心框中的内容变长时，它将根据需要占用尽可能多的可用空间，同时保持居中。左右方框永远不会缩小，因此当没有空格时，overflow:hidden和text-overflow:省略号将生效，破坏内容;
[Left box][Center boxxxxxxxxxxxxx][Right box]
以上都是我的理想情况，但是我不知道如何达到这个效果。因为当我创建一个这样的伸缩结构时:
.parent {
display : flex; // flex box
justify-content : space-between; // horizontal alignment
align-content : center; // vertical alignment
}
如果左右方框的大小完全相同，我就会得到想要的效果。然而，当其中一个的大小不同时，居中的盒子就不再是真正的居中。
有人能帮我吗?
更新
一个自我证明很好，这很理想
.leftBox {
justify-self : flex-start;
}
.rightBox {
justify-self : flex-end;
}
如果左右方框的大小完全相同，我就会得到想要的效果。然而，当其中一个大小不同时，居中的盒子就不再是真正的居中了。有人能帮我吗?
下面是一个使用flexbox将中间项居中的方法，而不考虑兄弟项的宽度。
主要特点:
纯CSS
没有绝对定位
没有JS / jQuery
使用嵌套的伸缩容器和自动边距:
.container {
display: flex;
}
.box {
flex: 1;
display: flex;
justify-content: center;
}
.box:first-child > span { margin-right: auto; }
.box:last-child > span { margin-left: auto; }
/* non-essential */
.box {
align-items: center;
border: 1px solid #ccc;
background-color: lightgreen;
height: 40px;
}
p {
text-align: center;
margin: 5px 0 0 0;
}
<div class="container">
<div class="box"><span>short text</span></div>
<div class="box"><span>centered text</span></div>
<div class="box"><span>loooooooooooooooong text</span></div>
</div>
<p>↑<br>true center</p>
下面是它的工作原理:
顶层的div (.container)是一个伸缩容器。
每个子div (.box)现在都是一个伸缩项。
每个.box项被赋予flex: 1，以便平均分配容器空间(更多细节)。
现在这些项占用了行中的所有空间，并且宽度相等。
将每个项目设置为(嵌套的)伸缩容器，并添加justify-content: center。
现在每个span元素都是居中的伸缩项。
使用弹性自动边距将外跨度左移和右移。
你也可以放弃合理内容，只使用汽车利润。
但合理内容在这里是可行的，因为汽车利润总是优先考虑的。
8.1. 与auto对齐
利润率
在通过justify-content和align-self对齐之前，any
正自由空间分布到该维度的自动边距。
