你怎么能保持中心框在柔性盒布局的中心？
想象下面的布局，点代表框之间的空间：
[Left box]......[Center box]......[Right box] 当我删除正确的盒子，我喜欢中心框仍然在中心，就像这样：
[Left box]......[Center box].................
如果我删除左边的框，也是一样的。
................[Center box].................
现在，当中心框内的内容变长时，它将占用尽可能多的可用空间，同时保持居中。 左右框永远不会缩小，因此当没有空间的时候， overflow:hidden和text-overflow: ellipsis将会有效地打破内容;
[Left box][Center boxxxxxxxxxxxxx][Right box]
以上都是我理想的情况，但是我不知道如何做到这一点。 因为当我创build一个像这样的柔性结构：
.parent { display : flex; // flex box justify-content : space-between; // horizontal alignment align-content : center; // vertical alignment }
如果左侧和右侧的盒子尺寸完全相同，我会得到所需的效果。 然而，当两者中的一个来自不同的大小时，居中的盒子不再是真正的居中。
有没有人可以帮助我？
更新
justify-self会很好，这将是理想的：
.leftBox { justify-self : flex-start; } .rightBox { justify-self : flex-end; }
使用嵌套的柔性容器和auto边距：
.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; }
<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>
- 在容器中使用三个弹性项目
- 将
flex: 1设置为第一个和最后一个。 这使得他们平等增长，填补中间留下的可用空间。 - 因此，中间的人会倾向于居中。
-
但是，如果第一个或最后一个项目的内容很宽，则由于新的
min-width: auto初始值，该弹性项目也会增长。注意Chrome似乎没有正确实施。 但是，您可以将
min-width设置为-webkit-max-content或-webkit-min-content，它也可以工作。 -
只有在这种情况下，中间元素才会被推出中心。
.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>
你可以这样做：
.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>
