フレックスボックスのイメージの周りにテキストを折り返す方法はありませんか？

Question

通常、テキストブロックがある場合は、画像を左または右に浮かせてテキストを囲むことができますが、フレックスボックスの浮動小数点は機能しません。解決策を見つけるのに苦労しています。

ブートストラップ4は、フレックスボックスを新しいグリッドシステムに使用しますが、列にテキストブロックを置くことができず、イメージの周りにテキストを折り返すことができない場合は、

Answer 1

第1に、フレックスボックスはグリッドシステムでもなく、フレックスボックスを置き換えるものでもありません。

実際、ブートストラップ4はまだほとんど同じグリッドシステムを持っていますが、BS4はフレックスボックスの利点のいくつかをさらに使用する機能を追加しました。

フロートの場合は...はい、親要素をdisplay:flexに設定すると、は即時の子供（フレックス子供またはフレックスアイテム）をフローティングすることはできません。

ただし、表示値が継承されないため、浮動小数点の内容はのままです。

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>