html – 如何在flexbox中围绕对象(如浮动)包装文本？

发布时间：2020-12-14 23:42:34 所属栏目：资源来源：网络整理

导读：假设我有一个显示：带有一些文本子项的内联容器,以及一些内联块子项：如果我给容器下面的CSS …(并将inline-block更改为inline-flex) display: flex;flex-direction: row;flex-wrap: wrap;align-items: center; …然后它将文本元素视为自己的整个元素并包装

假设我有一个显示：带有一些文本子项的内联容器,以及一些内联块子项：

如果我给容器下面的CSS …(并将inline-block更改为inline-flex)

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

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

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

解决方法

创建弹性容器(display：flex或display：inline-flex)后,所有流入的子级都将成为弹性项目.

根据定义,Flex项目是“阻塞的”,这意味着它们是块级框(source).

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!