想象一下下面的布局，其中圆点代表盒子之间的空间:
[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
Use three flex items in the container
Set flex: 1 to the first and last ones. This makes them grow equally to fill the available space left by the middle one.
Thus, the middle one will tend to be centered.
However, if the first or last item has a wide content, that flex item will also grow due to the new min-width: auto initial value.
Note Chrome doesn't seem to implement this properly. However, you can set min-width to -webkit-max-content or -webkit-min-content and it will work too.
Only in that case the middle element will be pushed out of the center.
.outer-wrapper {
display: flex;
}
.item {
background: lime;
margin: 5px;
}
.left.inner-wrapper, .right.inner-wrapper {
flex: 1;
display: flex;
min-width: -webkit-min-content; /* Workaround to Chrome bug */
}
.right.inner-wrapper {
justify-content: flex-end;
}
.animate {
animation: anim 5s infinite alternate;
}
@keyframes anim {
from { min-width: 0 }
to { min-width: 100vw; }
}
<div class="outer-wrapper">
<div class="left inner-wrapper">
<div class="item animate">Left</div>
</div>
<div class="center inner-wrapper">
<div class="item">Center</div>
</div>
<div class="right inner-wrapper">
<div class="item">Right</div>
</div>
</div>
<!-- Analogous to above --> <div class="outer-wrapper"><div class="left inner-wrapper"><div class="item">Left</div></div><div class="center inner-wrapper"><div class="item animate">Center</div></div><div class="right inner-wrapper"><div class="item">Right</div></div></div><div class="outer-wrapper"><div class="left inner-wrapper"><div class="item">Left</div></div><div class="center inner-wrapper"><div class="item">Center</div></div><div class="right inner-wrapper"><div class="item animate">Right</div></div></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>
