如何在 flexbox 中围绕对象(如浮动)环绕文本? [英] How to wrap text around objects (like floating does) in flexbox?

问题描述

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

Let's say I have a display: inline container with some text children, and some inline-block children:

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

If I give the container the following CSS... (and change inline-block to inline-flex)

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

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

... then it treats the text element as an entire element of its own and wraps the whole thing, rather than breaking it up.

是否有一种flexbox"方式可以实现这一点，还是我真的必须退回到内联显示?

Is there a "flexbox" way of achieving this, or do I really have to fall back to display inline?

推荐答案

一旦你创建了一个 flex 容器(display: flex 或 display: inline-flex)，所有流入的孩子成为弹性项目.

Once you create a flex container (display: flex or display: inline-flex), all in-flow children become flex items.

Flex 项目，根据定义，是块化的"，这意味着它们是块级的盒子 (来源).

Flex items are, by definition, "blockified", which means they are block-level boxes (source).

文本元素代表行内级框(来源).

Text elements represent inline-level boxes (source).

因此，您不能让 flex 项目以与文本(或浮动)相同的方式换行.

Therefore, you cannot make flex items wrap in the same way as text (or floats).

这篇关于如何在 flexbox 中围绕对象(如浮动)环绕文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！