如何在flexbox中围绕对象（如浮动）包装文本？

Question

假设我有一个display: inline容器，其中包含一些文本子项和一些inline-block个孩子：

如果我为容器提供以下CSS ...（并将inline-block更改为inline-flex）

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

...然后它将文本元素视为自己的整个元素并包装整个事物，而不是将其分解。

是否有“flexbox”方法来实现这一目标，还是我真的不得不回归显示内联？

Answer 1

创建弹性容器（display: flex或display: inline-flex）后，所有流入的子级都将成为弹性项目。

根据定义，Flex项目是“阻塞的”，这意味着它们是块级框（source）。

文本元素表示内联级框（source）。

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