相关疑难解决方法(0)

想象一下以下布局,其中圆点表示框之间的空间:

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

当我移除右边的盒子时,我喜欢中心盒仍然位于中心,如下所示:

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

如果我删除左框也是如此.

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

现在,当中心框内的内容变得更长时,它将占用尽可能多的可用空间,同时保持居中.左边和右边框将永远不会收缩,因此当没有剩余空间的地方overflow:hidden,并text-overflow: ellipsis会在效果打破了内容;

[Left box][Center boxxxxxxxxxxxxx][Right box]

以上都是我理想的情况,但我不知道如何实现这个效果.因为当我创建一个像这样的flex结构时:

.parent {
    display : flex; // flex box
    justify-content : space-between; // horizontal alignment
    align-content   : center; // vertical alignment
}

如果左右框的大小完全相同,我会得到所需的效果.然而,当两者中的一个来自不同尺寸时,居中的盒子不再真正居中.

有没有人可以帮助我？

更新

A justify-self会很好,这将是理想的:

.leftBox {
     justify-self : flex-start;
}

.rightBox {
    justify-self : flex-end;
}