想象一下下面的布局，其中圆点代表盒子之间的空间:
[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，使用网格在2行CSS中解决了这个问题，而不需要在顶级子级中添加额外的标记。
HTML:
<header class="header">
<div class="left">variable content</div>
<div class="middle">variable content</div>
<div class="right">variable content which happens to be very long</div>
</header>
CSS:
.header {
display: grid;
grid-template-columns: [first] 20% auto [last] 20%;
}
.middle {
/* use either */
margin: 0 auto;
/* or */
text-align: center;
}
Flexbox很棒，但不应该是所有问题的答案。在这种情况下，网格显然是最干净的选择。
甚至为您的测试乐趣做了一个代码依赖:
https://codepen.io/anon/pen/mooQOV
而不是默认使用flexbox，使用网格在2行CSS中解决了这个问题，而不需要在顶级子级中添加额外的标记。
HTML:
<header class="header">
<div class="left">variable content</div>
<div class="middle">variable content</div>
<div class="right">variable content which happens to be very long</div>
</header>
CSS:
.header {
display: grid;
grid-template-columns: [first] 20% auto [last] 20%;
}
.middle {
/* use either */
margin: 0 auto;
/* or */
text-align: center;
}
Flexbox很棒，但不应该是所有问题的答案。在这种情况下，网格显然是最干净的选择。
甚至为您的测试乐趣做了一个代码依赖:
https://codepen.io/anon/pen/mooQOV
