如何在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项目是"阻塞的",这意味着它们是块级框(源).

文本元素表示内联级框(源).

因此,您不能以与文本(或浮点数)相同的方式使flex项目换行.