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

问题描述

我已经阅读了很多关于 CSS 弹性框和 CSS 网格的教程，但坦率地说，我就是不知道如何做这个简单(?)的事情.

我只想让容器中的元素都和最宽的元素一样宽.

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

考虑这个 HTML:

<button>普通按钮</button><button>tiny</button><button>一个非常、非常、非常宽的按钮</button>

产生这样的结果:

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

我不希望它们只是伸展以填充页面的宽度:

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

解决方案

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

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

.container {显示:内联网格；网格模板列:1fr 1fr 1fr；}

<button>普通按钮</button><button>tiny</button><button>一个非常、非常、非常宽的按钮</button>

工作原理如下:

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

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

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

这会导致网格项与行中最宽项的宽度相同.

奇怪，但真实.

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

这是规范中的相关部分:

<块引用>

7.2.3.灵活的长度:fr单位

...

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

每个 flex-sized 网格轨道的使用大小是通过确定每个 flex-sized 网格轨道的 max-content 大小并划分它通过相应的弹性系数确定假设的 1fr大小".

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

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.

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?

Consider this HTML:

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

That produces something like this:

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:

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

解决方案

Yes. This can be done with pure CSS.

Here's a simple solution:

.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>

Here's how it works:

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).

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).

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.

Strange, but true.

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

Here's the relevant section in the spec:

7.2.3. Flexible Lengths: the fr unit

...

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.

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".

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屋！