使用空格制作大小相等的 div:nowrap

Question

我正在尝试在一行中创建一系列div，每个div的宽度相等，宽度是最长div的长度。换句话说，如果我有这个：

<div class="wrapper">
  <div>Hello</div>
  <div>Goodbye</div>
  <div>Some really long text</div>
  <div>More text</div>
</div>

我希望所有文本都在一行上(所以white-space: nowrap(，每个div都是最长文本的长度，在这种情况下将是"一些非常长的文本"。

我的方法是使用内联柔性，如下所示：

.wrapper {
  display: inline-flex;
  flex-flow: row nowrap;
}
.wrapper > div {
  border: 1px solid red;
  flex: 1 1 25%;
  padding: 5px 10px;
  white-space: nowrap;
}

这种方法不起作用，因为我的div 大小不相等。但是，如果我删除white-space: nowrap，那么我的div 大小相等，但现在文本已换行。

这是两个版本的代码笔：https://codepen.io/unpossible/pen/xjxKBM

那么，有没有办法将第一次尝试的无包装和第二次尝试的相同大小的div结合起来呢？

Answer 1

使用网格布局而不是 flex 更改包装器来inline-grid

你可以在这里找到更多关于它的信息 CSS 网格布局

并检查此代码笔以获取答案

.wrapper {
  display: inline-grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

Answer 2

您只需将flex-shrink设置为 0 .
从本质上讲，您只是在寻找flex: 1 0 25%而不是flex: 1 1 25%：

.wrapper {
  display: inline-flex;
  flex-flow: row nowrap;
}
.wrapper > div {
  border: 1px solid red;
  flex: 1 0 25%;
  padding: 5px 10px;
  white-space: nowrap;
}

<div class="wrapper">
  <div>Hello</div>
  <div>Goodbye</div>
  <div>Some really long text</div>
  <div>More text</div>
</div>