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

Posted 2023-03-05

【中文标题】所有宽度设置为最宽元素的宽度

【英文标题】：All widths set to width of widest element

【发布时间】：2018-06-08 18:08:50

【问题描述】：

我已经阅读了很多关于 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 是什么？

【问题讨论】：

只有 CSS 没有。用js是有可能的。

它超级简单，只需使用像this这样的CSS

@Jo He 特别要求物品不要拉伸到容器的宽度。据我所知，flexbox 做不到。

这能回答你的问题吗？ Every item to have the same width as the widest element

【参考方案1】：

这是一个使用 CSS Grid 处理任意数量按钮的解决方案：

div.container 
  display: inline-grid;
  grid-auto-columns: 1fr;


div.container button 
  grid-row: 1;

【讨论】：

为什么position: absolute on .container 会破坏这个机制？

因为position: absolute 对inline 元素没有任何意义。请参阅此答案以获得更长的解释：***.com/a/5042666/1510070

【参考方案2】：

是的。这可以用纯 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 单位。它旨在分配容器中的可用空间（有点类似于flex-grow）。

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

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

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

奇怪，但真实。

这也是为什么使用 equal height rows is possible with Grid (but not flexbox) 布局的原因。

这是规范中的相关部分：

7.2.3. Flexible Lengths: the fr unit

...

当可用空间是无限时（当网格 容器的宽度或高度是不确定的），flex-sized (fr) 网格轨道是 根据内容调整大小，同时保持各自的比例。

每个 flex-sized 网格轨道的使用大小是通过确定 每个 flex-sized 网格轨道的 max-content 大小并将其划分 大小由各自的弹性系数确定“假设的1fr 大小”。

其中的最大值用作解析的1fr 长度（ flex 分数），然后乘以每个网格轨道的 flex 决定其最终大小的因素。

【讨论】：

工作得非常好，并且在所有主流浏览器中都受支持。我很好奇是否有办法让它动态工作？如，不知道有多少列。