inline-flex 容器如何决定文本何时换行？

Question

我在文本裁剪方面遇到问题，即使弹性项目的 flex-basis 设置为 0，也会过早地裁剪弹性项目，因此我希望弹性容器将所有项目拉伸到至少与最大项目一样大在容器中。不管怎样，这里有一个 fiddle:

它是如何选择换行的？为什么不拉伸第一项。

.button {
  flex: 1 1 0;
  border: 1px solid red;
}

.container {
  display: inline-flex;
}

<div class="container">
<div class="button">
  Some text
</div>
<div class="button">
  Some text that is very long indeed
</div>
</div>

我可以看到第二个文本被换行了，但这是如何决定的？任何地方都没有设置宽度

Answer 1

I can see that the second text is wrapped but how is that decided? There are no widths set anywhere

有一个宽度设置，它不是微不足道的，你正在使用 inline-flex 它本身应该告诉你发生了什么。

容器的宽度将等于其内容，在本例中为两个元素的文本宽度。

演示

.button {
  border: 1px solid red;
}

.container {
  display: inline-flex;
}

.test>.button {
  flex: 1 1 0;
}

No flex properties set
<br/>
<div class="container">
  <div class="button">
    Some text
  </div>
  <div class="button">
    Some text that is very long indeed
  </div>
</div>
<br/>
<br/>
<br/> flex properties set
<br/>
<div class="container test">
  <div class="button">
    Some text
  </div>
  <div class="button">
    Some text that is very long indeed
  </div>
</div>

如您所见，容器的宽度相同。

现在无论我们做什么，容器的宽度都是固定的并且不会改变，所以当您应用 flex: 1 1 0; 时，您只是简单地划分宽度 （均匀 flex-basis:0;) 在两个元素之间然后你得到包装。

inline-flex 容器如何决定文本何时换行？

How does inline-flex container decide when text is wrapped?

html

css

sass

flexbox