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都是最长的一个，在这种情况下就是“一些非常长的文本”。

我的方法是使用inline-flex，如下所示：

.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大小相同，但现在文本已被包装。

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

那么无论如何要结合第一次尝试的无包装和第二次尝试的相同大小的div？

Answer 1

使用网格布局而不是弹性更改包装到inline-grid

您可以在CSS Grid Layout

找到更多相关信息

并检查此codepen for your answer

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

用白色空间制作大小相等的div：nowrap

2 个答案: