Question

通常当你有一个文本块时，你可以向左或向右浮动图像以包围它周围的文本，但在flexbox浮动不起作用，我很难找到解决方案。

Bootstrap 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>

Answer 2

这不是像float那样的完整解决方案，但是我们可以在CSS中使用'+'来包装图片的下一个标记。

.container{
  display:flex;
  flex-wrap: wrap;
  width:100%;
}
h3{
  width:100%;
}
.page-pic{
  margin:0 20px 0 0;
  max-width:200px;
}
.container .page-pic + p{
  flex:1;
  position:relative;
  top:-20px
}

<div class="container">
    <h3>Some Title</h3>
    <img src="https://picsum.photos/id/1073/200/200" class="page-pic">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu ornare quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus molestie sodales ante a suscipit. Proin sed diam nisi. Nunc lobortis et nulla auctor varius. Cras dignissim, metus sit amet aliquam posuere, ante magna pharetra justo, at mattis turpis purus non nibh. Quisque congue mauris id ligula fringilla fermentum. Morbi laoreet nec nulla non rhoncus. Etiam vitae tellus eget nunc finibus eleifend vel non ante. Nunc odio odio, fermentum ac hendrerit non, consequat nec felis. </p>
    <h3>Another Title</h3>
    <p>Another Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu ornare quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus molestie sodales ante a suscipit. Proin sed diam nisi. Nunc lobortis et nulla auctor varius. Cras dignissim, metus sit amet aliquam posuere, ante magna pharetra justo, at mattis turpis purus non nibh. Quisque congue mauris id ligula fringilla fermentum. Morbi laoreet nec nulla non rhoncus. Etiam vitae tellus eget nunc finibus eleifend vel non ante. Nunc odio odio, fermentum ac hendrerit non, consequat nec felis. </p>
    </div>

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

2 个答案: