Css 左、中、右对齐3个不相等的块

我正在尝试对齐一个由3块内容组成的顶部菜单

我试图实现的是：

• 块1：左对齐
• 块2：水平居中
• 块3：右对齐

如果所有3个块的大小都相同，我可以使用flexbox（如代码段中所示），但它们不是，因此它不会生成我需要的输出

相反，FrasBox在3个块之间放置相等的空间，导致中间块对齐偏离中心。 我想知道这是否可以通过flexbox实现，或者如果不能，另一种解决方案。这需要在生产中稳健地工作，因此“网格”解决方案不适用，因为没有足够的支持

.container{
利润率：20px0；
}
.行{
背景色：石灰；
显示器：flex；
证明内容：之间的空间；
}
.项目{
背景颜色：蓝色；
颜色：#fff；
填充：16px；
}

左，稍微长一点
中锋，这个项目要长得多
正确的

能否为item类指定flex grow:1并选中

.item {
background-color: blue;
color: #fff;
padding: 16px;
flex-grow:1;
}

---

希望这就是你所寻找的

< P>你可以考虑<代码> Flex Guest: 1；弹性基础：0%用于左、右元素，然后使用

文本对齐

对齐内部内容。我添加了一个额外的包装器，只在文本周围保留背景

诀窍是通过仅删除中间内容并将其等分到左右元素来计算自由空间

.container{
利润率：20px0；
填充顶部：10px；
背景：线性梯度（#000，#000）中心/5px 100%无重复；/*中心*/
}
.行{
背景色：石灰；
显示器：flex；
颜色：#fff；
}
.项目：非（：第n个孩子（2））{
弹性基准：0%；
柔性生长：1；
}
.项目：最后一个孩子{
文本对齐：右对齐；
}
.项目跨度{
背景颜色：蓝色；
显示：内联块；
填充：16px；
边框：2倍纯红；
框大小：边框框；
}

左，稍微长一点
中锋，这个项目要长得多
正确的

使用显示表（一种古老的支持网格）的替代方案

引自

如果第一行上没有宽度，则不管单元格内的内容如何，列宽都会在表中平均分配

---

我问了一个类似的问题，堆栈溢出将我引向这里。来自@Paolamoralesval的回复让我意识到，在CSS网格中可以实现所需的效果。既然网格支持已经相当普遍，我希望它能够满足每个人的需求。我相信这个解决方案完全响应窗口大小以及标题项的高度和宽度，如果您调整查看代码段的窗口大小，您应该会看到这一点

.header{
网格行：1；
网格柱：1；
显示：网格；
网格模板行：最小内容；
网格模板柱：1fr 1fr 1fr；
}
.左标题{
自我辩护：开始；
自对准：居中；
文本对齐：左对齐；
背景色：红色；
}
.收割台中心{
自我辩护：中心；
自对准：居中；
文本对齐：居中；
背景颜色：绿色；
}
.右标题{
自我辩护：结束；
自对准：居中；
文本对齐：右对齐；
背景颜色：蓝色；
}
.收缩猫{
宽度：200px；
}

大卫·科尔比（David Corby）

编辑人：
，
在中间
在右手边要多得多

确实有两条线
正文
在底部

我已经看过了“重复”答案。这是不同的情况。文章中的所有flex和auto margin解决方案都依赖于“相同大小”的块，这是这里的一个关键区别。网格的支持不够。你能为“.item”类和check给出“flex-grow:1；”吗？我遇到了非常好的、值得一读的答案，并且提供了几种不同于的解决方案。你能解释一下吗？

。item:not（：nth child（2））

？@CodyBugstein这意味着不要选择第二个孩子。所以我只对第一个和最后一个应用CSS啊，好吧，我以为你想把解决方案推广到有3个以上项目的情况

.container {
   display: table;
   table-layout: fixed
 } // would divide cells equally along table's 100% width. 
.row {
   display: table-row
 }
.item {
   display: table-cell
 }