html - How to wrap text around objects (like floating does) in flexbox?

Question

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

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.

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

Answer 1

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

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

Text elements represent inline-level boxes (source).

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