如何在flexbox中让文本环绕对象（类似于浮动）？

Question

假设我有一个包含文本子元素和一些 inline-block 子元素的 display: inline 容器：

如果我给这个容器添加以下样式...（并将 inline-block 改为 inline-flex）

display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;

如果文本元素作为自己的整个元素进行处理并将其包装起来，而不是将其分割开，则它会将文本元素视为自己的整个元素并将其包装起来，而不是将其分割开。

是否有一种“flexbox”方法可以实现这一点，还是我真的必须回退到inline显示？

- Andrew Rasmussen

---

如果你想要实现这个，为什么要依赖Flex呢？它已经按照你的需求工作了。 - Temani Afif

@TemaniAfif 这是个不错的问题。我们的CSS有90%以上的flexbox，所以我只是尽可能保持一致。如果不可能，那也没关系。我只是想尽可能地按照flexbox的方式来做。 - Andrew Rasmussen

Answer 1

创建一个弹性容器（display: flex或display: inline-flex）后，所有内部流动的子元素都将成为弹性项。

弹性项的定义是"块化"，这意味着它们是块级盒子（来源）。

文本元素表示行内级别的盒子（来源）。

因此，您不能以与文本（或浮动）相同的方式使弹性项换行。

- Michael Benjamin

---

我原本就这样想，只是想在这里问一下以确认。感谢解释。 - Andrew Rasmussen