最宽元素的宽度设置行中所有兄弟的宽度 [英] Width of widest element sets width of all siblings in the row

问题描述

我已经阅读了很多关于CSS弹性框和CSS网格的教程，但坦白地说，我无法弄清楚如何做这个简单的（？）事情。

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

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

考虑这个HTML：

  < div class =container> 
<按钮>普通按钮< /按钮> 
<按钮>微小< /按钮> 
<按钮>真的非常非常宽的按钮< /按钮> 
< / div> 
  

产生这样的结果：

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

我不希望他们只是扩展到填写页面的宽度：

可以这样做？如果是这样，那么上面的HTML的CSS会是什么？

解决方案

是的。这可以使用纯CSS来完成。

以下是一个简单的解决方案：

  .container {display：inline-grid; grid-template-columns：1fr 1fr 1fr;}  

< ; div class =container> <按钮>普通按钮< /按钮> <按钮>微小< /按钮> <按钮>真的非常非常宽的按钮< / button>< / div>

以下是它的工作原理： b
$ b

网格布局提供了一个用于在网格容器中建立灵活长度的单位。这是 fr 单元。它的目的是在容器中分配可用空间（有点类似于 flex-grow ）。

然而，

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

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

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

奇怪，但属实。

这也是为什么具有等高行的布局可以使用网格（而不是flexbox）。

这是规范中的相关部分： b
$ b

7.2.3。灵活长度： fr
单位

...

当可用空间是无限的时（发生在grid
容器的宽度或高度不确定时），flex大小（ fr ）网格轨道的大小为它们的内容大小，同时保持它们各自的比例。

每个弹性大小的网格轨道的已用尺寸是通过确定每个弹性大小的网格轨道的
大小 max-content 尺寸并将该
大小除以相应的弹性系数来计算以确定假设 1fr
size。

这些最大值用作已解析的 1fr 长度（
flex分数），然后乘以每个网格曲线的flex
因子以确定其最终大小。

< blockquote>

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