html - 如何在 flexbox 中将文本环绕在对象周围(就像 float 一样)？

Question

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

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

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

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

是否有一种“flexbox”方式来实现这一点，或者我真的必须回退到显示内联？

Answer 1

一旦创建了 flex 容器(display: flex 或 display: inline-flex)，所有流入的子元素都会成为 flex 元素。

根据定义，Flex 元素是“ block 化”的，这意味着它们是 block 级框 (source)。

文本元素表示行内框 ( source )。

因此，您不能使 flex 元素以与文本(或 float )相同的方式换行。