Html Flexbox中柱定心问题

如何防止左列增长？希望logo列居中，左、右列占据结果空间。做了一把小提琴来演示效果。

我们有一个javascript，它检查内容宽度，然后更改为不同的布局，但我仍然不希望外部列增长。我知道它在增长，因为左边还有空间

body.nav{
显示器：flex；
弯曲方向：行；
证明内容：中心；
边缘底部：100px；
}
车身.导航跨度{
空白：nowrap；
}
body.nav.nav列：第n个子项（1）{
文本对齐：左对齐；
调整内容：灵活启动；
柔性生长：1；
弹性基准：50%；
}
body.nav.nav列：第n个子项（2）{
文本对齐：居中；
证明内容：中心；
背景色：#99CCFF；
弹性基础：160px；
}
body.nav.nav列：第n个子项（3）{
文本对齐：右对齐；
证明内容：柔性端；
柔性生长：1；
弹性基准：50%；
}

菜单链接内容较长，但不应重叠，也不应向右推
标志
CTA
这里看起来不错
标志
CTA

在左右列添加

flex:1

，并为长

span

添加省略号（我注意到内容中有

空白：nowrap

），方法是添加：

overflow: hidden;
text-overflow: ellipsis;

请参见下面的演示：

body.nav{
显示器：flex；
弯曲方向：行；
证明内容：中心；
边缘底部：100px；
}
车身.导航跨度{
空白：nowrap；
}
body.nav.nav列：第n个子项（1）{
文本对齐：左对齐；
调整内容：灵活启动；
/*柔性生长：1*/
/*弹性基准：50%*/
弹性：1；/*增加*/
溢出：隐藏；/*已添加*/
文本溢出：省略号；/*已添加*/
}
body.nav.nav列：第n个子项（2）{
文本对齐：居中；
证明内容：中心；
背景色：#99CCFF；
弹性基础：160px；
}
body.nav.nav列：第n个子项（3）{
文本对齐：右对齐；
证明内容：柔性端；
/*柔性生长：1*/
/*弹性基准：50%*/
弹性：1；/*增加*/
溢出：隐藏；/*已添加*/
文本溢出：省略号；/*已添加*/
}

菜单链接内容较长，但不应重叠，也不应向右推
标志
CTA
这里看起来不错
标志
CTA

但这会将外柱推出容器。我们需要空白：nowrap来计算元素的宽度。我们希望看到它们何时包装，然后我们显示一个不同的视图。这很好，但我“希望”溢出，以便我可以使用javascript计算元素是否导致溢出。你知道怎么做吗？只是看到省略号设置在家长身上，对孩子没有影响，这很好。所以我们可以强制溢出。为什么你认为只有省略号将标志居中？我会说overflow:hidden是我想要的设置，它可以防止列占用未使用的空间。我错过什么了吗？@Rob是的，我是说实际上。。。由于代码有省略号，我这样写：）

overflow: hidden;
text-overflow: ellipsis;