所有宽度均设置为最宽元素的宽度

Question

[我已经阅读了很多有关CSS弹性框和CSS网格的教程，但是坦率地说，我只是不知道如何执行此简单的（？）事情。

我想要的是使容器中的元素都与最宽的元素一样宽。

我不希望它们填满容器的整个宽度，只是全部都增长到最大宽度。 CSS可以做到吗？

考虑此HTML：

<div class="container">
   <button>a normal button</button>
   <button>tiny</button>
   <button>a really, really, really wide button</button>
</div>

产生类似这样的内容：

我想要的是这样的东西，它们都是最宽按钮的宽度：

我不想让他们伸出来填满页面的宽度：

可以这样做吗？如果是这样，那么上述HTML的CSS是什么？

Answer 1

是。这可以通过纯CSS完成。

这是一个简单的解决方案：

.container {
  display: inline-grid;
  grid-template-columns: 1fr 1fr 1fr;
}

<div class="container">
   <button>a normal button</button>
   <button>tiny</button>
   <button>a really, really, really wide button</button>
</div>

这是它的工作方式：

网格布局提供了用于在网格容器中建立灵活长度的单元。这是fr单位。它旨在在容器中分配可用空间（和fr有点相似）。

但是，当容器的宽度/高度是动态的（例如，在这种情况下为flex-grow时，Grid规范提供了特别独特的行为。

在这种情况下，display: inline-grid单元将计算每个网格项目的fr。然后，它将采用找到的最大值并将其用作轨道上所有项目的max-content长度。

这将导致网格项目共享该行中最宽项目的宽度。

很奇怪，但是是真的。

这也是为什么具有1fr的布局。

这是规范中的相关部分：

equal height rows is possible with Grid (but not flexbox)

...

[当可用空间为无穷大时（当网格容器的宽度或高度不确定），柔性尺寸（7.2.3. Flexible Lengths: the fr unit）网格轨迹是调整其大小，同时保留各自的比例。

每个弹性尺寸网格轨迹的已用尺寸通过确定每个弹性尺寸的网格轨迹的fr大小并将其除以大小通过相应的弹性系数确定“假设的fr大小”。

其中最大值用作解析的max-content长度（弹性分数），然后乘以每个网格轨道的弹性确定最终尺寸的因素。

Answer 2

这是使用CSS Grid的解决方案，可以使用任意数量的按钮：

1fr