你怎么能保持中心框在柔性盒布局的中心?

在这里输入图像描述

想象下面的布局,点代表框之间的空间:

[Left box]......[Center box]......[Right box] 

当我删除正确的盒子,我喜欢中心框仍然在中心,就像这样:

 [Left box]......[Center box]................. 

如果我删除左边的框,也是一样的。

 ................[Center box]................. 

现在,当中心框内的内容变长时,它将占用尽可能多的可用空间,同时保持居中。 左右框永远不会缩小,因此当没有空间的时候, overflow:hiddentext-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> 
  1. 在容器中使用三个弹性项目
  2. flex: 1设置为第一个和最后一个。 这使得他们平等增长,填补中间留下的可用空间。
  3. 因此,中间的人会倾向于居中。
  4. 但是,如果第一个或最后一个项目的内容很宽,则由于新的min-width: auto初始值,该弹性项目也会增长。

    注意Chrome似乎没有正确实施。 但是,您可以将min-width设置为-webkit-max-content-webkit-min-content ,它也可以工作。

  5. 只有在这种情况下,中间元素才会被推出中心。

 .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>