问题描述
假设我有一个 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 中围绕对象(如浮动)环绕文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！