所有宽度均设置为最宽元素的宽度 [英] All widths set to width of widest element

问题描述

我已经阅读了很多有关CSS弹性框和CSS网格的教程，但是坦率地说，我只是不知道该怎么做.

I've read a lot of tutorials about CSS flex boxes and CSS grids, but frankly I just can't figure out how to do this simple(?) thing.

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

All I want is for the elements in a container to all be as wide as the widest element.

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

I don't want them to fill up the whole width of the container, just all grow to the maximum width. Can that be done with CSS?

考虑以下HTML:

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

产生类似这样的东西:

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

What I want is something like this, where they're all the width of that widest button:

我不希望它们伸出来填充页面的宽度:

I DON'T want them to just stretch out to fill the width of the page:

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

Can this be done? If so, what would be the CSS for the above HTML?

推荐答案

是.这可以使用纯CSS来完成.

Yes. This can be done with pure 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>

这是它的工作方式:

Grid Layout提供了一个用于在网格容器中建立灵活长度的单元.这是 fr 单位.它旨在在容器中分配可用空间(与flex-grow有点类似).

Grid Layout provides a unit for establishing flexible lengths in a grid container. This is the fr unit. It is designed to distribute free space in the container (and is somewhat analogous to flex-grow).

但是，当容器的宽度/高度是动态的(例如，在本例中为display: inline-grid)时，Grid规范提供了特别独特的行为.

However, the Grid spec provides for a particularly unique behavior when the container's width / height is dynamic (e.g., display: inline-grid, in this case).

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

In such cases, the fr unit will compute the max-content of each grid item. It will then take the maximum value it finds and use that as the 1fr length for all items on the track.

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

That results in grid items that share the width of the widest item in the row.

奇怪，但是是真的.

这也是为什么使用Grid(而不是flexbox)可以实现具有等高行的布局的原因.

It's also why a layout with equal height rows is possible with Grid (but not flexbox).

这是规范中的相关部分:

7.2.3.弹性长度:fr 单位

...

当可用空间为无穷大时(当网格 容器的宽度或高度是不确定的)，可伸缩尺寸(fr)的网格轨迹是 调整大小以保留其内容，同时保留各自的比例.

When the available space is infinite (which happens when the grid container’s width or height is indefinite), flex-sized (fr) grid tracks are sized to their contents while retaining their respective proportions.

每个弹性尺寸网格轨迹的已用尺寸是通过确定 每个弹性尺寸网格轨迹的max-content尺寸，并将其除以 大小根据相应的弹性系数确定假设1fr 大小".

The used size of each flex-sized grid track is computed by determining the max-content size of each flex-sized grid track and dividing that size by the respective flex factor to determine a "hypothetical 1fr size".

其中的最大值用作解析的1fr长度( 弹性分数)，然后乘以每个网格轨道的弹性 确定最终尺寸的因素.

The maximum of those is used as the resolved 1fr length (the flex fraction), which is then multiplied by each grid track’s flex factor to determine its final size.

这篇关于所有宽度均设置为最宽元素的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！