如何在flexbox中将对象包围（比如浮动）？ [英] How to wrap text around objects (like floating does) in flexbox?

问题描述

假设我有一个 display：inline 包含一些文本子元素的容器，还有一些 inline-block 子元素：

如果我给容器下面的CSS ...（并将 inline-block 更改为 inline-flex ）

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

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

是有没有一个flexbox的方式来实现这一点，或者我真的不得不退后显示内联？

解决方案

一个弹性容器（ display：flex 或 display：inline-flex ），所有流入的子元素都变为弹性项目。

根据定义，弹性项目是封锁的，这意味着它们是块级框（ source ）。

文本元素表示行内级框 source a>）。

因此，您不能使Flex项目以与文本（或浮动）相同的方式进行换行。

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?

解决方案

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

这篇关于如何在flexbox中将对象包围（比如浮动）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！