Html 将flexbox项目与不可折叠的可变宽度项目水平对齐

我想像这样在flexbox中对齐三个项目。上下文是，这些是长度未知但可包装的标签，用于测量中宽度未知的不可包装滑块/按钮行

[五十] [R] [可变宽度]

如何将顶部的两个项目与下部/中间项目的宽度对齐，而不将容器的宽度固定为中间项目的实际未知宽度

我考虑将左侧和右侧放入另一个flexbox，并对顶部容器使用列布局。我不喜欢这种方式，因为我必须打破真正的内容顺序左中右，但我甚至不能这样做

div{ 边框：1个点； } .集装箱{ 显示器：flex； 柔性包装：包装； 宽度：300px；/*我想去掉这个*/ } .左{ 顺序：1； 弹性：10； } .对{ 顺序：2； 弹性：10； 文本对齐：右对齐； } .中{ 顺序：3； flex:20自动； } 左边 这里有一些不知名的东西。 如果标签宽度超过50%，则右标签可以包裹 我不认为flex可以这样配置。使用左/右元素上的position:absolute可以实现您想要的效果：

.集装箱{ 位置：相对位置； 垫面：1米； 显示：内联块； } 左边 .对{ 位置：绝对位置； 排名：0； } .左{ 左：0； } .对{ 右：0； } .middle{} 左边 所以在我的真实例子中，这里有一些未知宽度的不可破解的东西。 正当

---

以下是不添加额外标记的解决方案：

.集装箱{ 显示：内联flex； 柔性包装：包装； 最大宽度：100%； 边框：1px实心； 利润率：20px； } .左{ 顺序：1； 最小宽度：0； 宽度：0.5px； 空白：nowrap； } .对{ 顺序：2； 最小宽度：0； 宽度：0.5px； 左边距：自动； 显示器：flex； 证明内容：柔性端； 空白：nowrap； } .中{ 顺序：3； 弹性基准：100% } 剩下的一些内容 所以在我的真实例子中，这里有一些未知宽度的不可破解的东西。这里有一些未知的不可揭露的东西。 一些正确的内容 剩下的一些内容 所以在我的真实例子中，这里有一些未知宽度的不可破解的东西。 正当 左边 所以在我的真实例子中，有。 正当 左边 所以在我的 正当 您可以将flex从auto更改为100%，并添加文本align:center到.middle，如下所示：

.集装箱{ 显示器：flex； 柔性包装：包装； } .左{ 顺序：1； 弹性：10； } .对{ 顺序：2； 弹性：10； 文本对齐：右对齐； } .中{ 顺序：3； flex:2 0 100%；/*将此更改为100%，而不是自动*/ 文本对齐：居中；/*将文本居中*/ } 左边 所以在我的真实例子中，这里有一些未知宽度的不可破解的东西。 正当

---

CSS网格是唯一可以根据需要对齐项目的纯CSS

div{ 边框：1个点； } .集装箱{ 显示：内联网格； 网格模板列：最小内容最小内容； } .对{ 网格柱：2； 网格行：1； } .中{ 格构柱：1/2跨； 空白：nowrap； } 左边 这里有一些不知名的东西。 如果标签宽度超过50%，则右标签可以包裹 使用flex basis:number%它工作得很好，受IE 10+支持，如果需要，您可以在媒体查询选择器中选择断点

检查我的代码：

div{ 边框：1个点； } .集装箱{ 显示器：flex； 柔性流：行换行； 证明内容：之间的空间； } .左{ 弹性基准：49.55%；/*将其更改为您想要的任何值*/ } .对{ 弹性基准：49.55%；/*将其更改为您想要的任何值*/ } .中{ 顺序：3； 弹性基准：100%； } 左边 这里有一些不知名的东西。 如果标签宽度超过50%，则右标签可以包裹

---

您是否反对在左/右内容中使用position:absolute？不错，但如果左/右标签较长，这可能会使它们相互碰撞，对吗？它们也有未知的内容。我将修改我的示例来说明这一点，因为我认为这是选择flebox的一个原因。这很好，解决了我的难题，谢谢。现在，要理解它为什么有效，并尝试将它应用到我真正的问题上还没有完全奏效。我遇到了一个障碍：当左/右可以包装，但不需要包装时，他们现在过早地这样做是因为黑客@鲁本好的，我明白了，我们可以在这里使用空格：nowrapcase@Ruben但是到时候他们会满溢的。。ok会考虑一个替代方案@鲁本：我添加了另一种方式，但不得不将内容拆分为两个不同的容器，但这不是我想要的布局。您自己的代码示例表明，这并不能再现我想要的输出。现在右元素不换行，总宽度由右宽度乘以2而不是中间的e来控制

---

谢谢，谢谢！我不知道CSS网格，因此特别感谢您忽略我的问题标题，询问flexbox解决方案；-这将选中所有框。在我真正的问题中，由于某种原因，控制中间元素的宽度计算会随着这个解决方案的改变而改变，但我可以自己解决这个问题。我之前没有注意到这一点，但这里再次强调，底部/中间元素并不控制整个元素的宽度：不过，我不确定规则是什么。我能让中间元素始终成为决定因素吗？