真的没有办法在flexbox中围绕图像包装文本吗？

Question

通常当你有一个文本块时,你可以向左或向右浮动图像以包围它周围的文本,但在flexbox浮动不起作用,我正在努力寻找解决方案.

Bootstrap 4将使用flexbox作为他们的新网格系统,但如果你不能在一列中有一个文本块并且还有文本环绕图像,这可能是一个交易破坏者.

Answer 1

首先,flexbox不是网格系统,也不打算替换它.

事实上,自举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>