场景

让我们来下面这个布局

1
2
3
4
5
6

<div style="display: flex;flex-direction: row;justify-content: space-between">
  <div style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap">
    这是用户输入的长文本，它可能会很长
  </div>
  <button>清空</button>
</div>

如果我们不指定文本内容的宽度，会导致用户输入过长时，清空按钮直接被挤走。

解决方法

添加 flex: 1 1 auto

1
2
3
4
5

<div
  style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap;flex: 1 1 auto"
>
  这是用户输入的长文本，它可能会很长
</div>

这里的意思是 表示一个用于 Flexbox 布局的快捷属性。它相当于以下属性的缩写：

1
2
3

flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
  1. flex-grow 定义了项目在分配多余空间时的放大能力。
  2. flex-shrink 定义了项目在空间不足时的缩小能力。
  3. flex-basis 定义了项目在未伸缩之前的初始大小。 设置 flex: 1 1 auto; 会使项目等比例地占据剩余空间，允许收缩，并以内容的自然宽度作为基准大小。