防止 css 网格中的项目拉伸以填充空间

Question

我有一个包含 3 个按钮的列表，我试图在网格中显示。

按钮的文本是动态的，可以是一个单词或一个完整的句子。

我希望每个按钮的宽度通过其内容来确定。如果是长句子，则使其变宽；如果是 1 个单词，则使其变小。例子：

在较大的屏幕上，我希望它们像上面一样显示在 1 行中。在较小的屏幕上，如果没有足够的宽度来将所有内容显示在一行中，我希望它将内容移动到下一行：

我一直在努力让它工作，因为每当我在容器上设置网格时，按钮都会水平拉伸以填充所有空间。或者，它们被移动到每行 1 个按钮，并且仍然一直水平拉伸。

我已经尝试过min-width对所有内容进行设置，我已经尝试过auto-fill/auto-fit以及所有不同justify的align属性，但没有给我带来我想要的结果。

现在对我有用的解决方案是不使用任何网格，只在按钮本身上设置顶部和右侧的边距，然后它们按照我想要的方式对齐。但我觉得这应该可以通过网格来实现。

这是可能的还是不使用网格的更好解决方案？

Answer 1

在按钮的 CSS 类上尝试这个

.btn{width:fit-content;}

Answer 2

今天我发现自己正在为这个问题而苦苦挣扎。我在网格的末端有一个按钮，它正在拉伸以填充网格单元，但我不希望这样（它看起来真的很奇怪）。

在这里没有找到答案后，我又到别处寻找答案。所以，这里是...

在网格中的每个项目上，您都可以使用它align-self:start;，并且它不会拉伸以填充容器。像这样的东西：

.container > *{
    align-self:start;
}

来源： https: //yoksel.github.io/grid-cheatsheet/#section-align-self

Answer 3

这不是你想要的吗？如果您不指定元素这样做，它们将不会覆盖整个空间。

.container {
  display: flex;
  flex-direction: row;
  resize: both;
  width: 300px;
  border: 1px solid blue;
  overflow: auto;
  flex-wrap: wrap;
}

.container > * {
  padding: 5px;
  border: 1px solid green;
  margin: 5px;
  white-space: nowrap;
}

<div class="container">
  <div>First medium</div>
  <div>Second</div>
  <div>Third very large</div>
</div>