是否真的没有办法在flexbox中的图像周围缠绕文本？

Question

通常情况下，当您有一段文字时，您可以将图像向左或向右浮动以围绕文字包裹文字，但在弹性盒浮标中不起作用，我正在努力寻找解决方案。

引导程序4将为他们的新网格系统使用flexbox，但如果您不能在列中包含文本块并且文本环绕图像，则这可能是一个难题。

Answer 1

首先，flexbox不是一个网格系统，也不是要取代一个。

事实上，Bootstrap 4仍然有几乎相同的网格系统，但BS4现在增加了使用flexbox 另外的一些好处的能力。

对于浮动...是的，如果你设置父元素为display:flex直接子（flex-children或flex-items）不能浮动。

但是由于显示值没有被继承，所以浮动的内容仍然包装正常。

img { 
 
    float: left; 
 
    margin-right: 1em; 
 
} 
 
.col-md-6, 
 
.col-sm-6 { 
 
    background: pink; 
 
} 
 
.row { 
 
    display: flex; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-6 col-sm-6"> 
 
     <img src="http://www.fillmurray.com/40/40" alt="" /> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque explicabo aspernatur delectus voluptate, nesciunt quibusdam ab reprehenderit, non et temporibus. Aut commodi, voluptates nulla deleniti pariatur vitae vel eos sit asperiores aliquid, 
 
     molestiae recusandae placeat corporis earum assumenda dolorem! Earum necessitatibus tempora enim nisi officiis in. Ducimus illo placeat eveniet.</p> 
 
    </div> 
 
    <div class="col-md-6 col-sm-6"> 
 
     <img src="http://www.fillmurray.com/40/40" alt="" /> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque explicabo aspernatur delectus voluptate, nesciunt quibusdam ab reprehenderit, non et temporibus. Aut commodi, voluptates nulla deleniti pariatur vitae vel eos sit asperiores aliquid, 
 
     molestiae recusandae placeat corporis earum assumenda dolorem! Earum necessitatibus tempora enim nisi officiis in. Ducimus illo placeat eveniet.</p> 
 
    </div> 
 
    </div> 
 
</div>