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

Posted

技术标签:

【中文标题】所有宽度设置为最宽元素的宽度【英文标题】: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: absoluteinline 元素没有任何意义。请参阅此答案以获得更长的解释:***.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 决定其最终大小的因素。

【讨论】:

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

以上是关于所有宽度设置为最宽元素的宽度的主要内容,如果未能解决你的问题,请参考以下文章

如何设置动态文本的按钮宽度等于div中最宽的按钮?

select 宽度跟随option内容自适应

移动端rem

为 Row 中的所有子级设置相同的大小

如何设置 UITextField 宽度约束为某个字符串留出空间

CSS - 打破网格元素并在列中拉伸到最宽