最宽元素的宽度设置行中所有兄弟的宽度

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单位.它旨在分配容器中的自由空间(有点类似flex-grow).

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

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

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

奇怪但真实.

这也是为什么Grid(但不是flexbox)可以使用相同高度行的布局.

这是规范中的相关部分:

7.2.3.灵活长度:fr 单位

...

当可用空间是无限的(当网格容器的宽度或高度不确定时发生),flex-sized(fr)网格轨道的大小与其内容相同,同时保留其各自的比例.

通过确定max-content每个柔性尺寸的栅格轨道的尺寸并将该尺寸除以相应的弯曲因子来确定每个柔性尺寸的栅格轨道的使用尺寸以确定"假设1fr 尺寸".

这些中的最大值用作分辨1fr长度(弯曲分数),然后乘以每个网格轨迹的弯曲因子以确定其最终尺寸.

Answer 2

以下是使用 CSS Grid 与任意数量的按钮配合使用的解决方案：

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

div.container button {
  grid-row: 1;
}