是否真的沒有辦法在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>