Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.2k views
in Technique[技术] by (71.8m points)

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

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

enter image description here

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.

enter image description here

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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).


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...