真的没有办法在 Flexbox 中将文本环绕在图像周围吗？

Question

通常，当你有一块文本时，你可以将图像向左或向右浮动，以将文本包裹在其周围，但在 Flexbox 中，浮动不起作用，我正在努力寻找解决方案。

Bootstrap 4 将在他们的新网格系统中使用 Flexbox，但是如果你不能在一列中包含文本块并且不能让文本环绕图像，那么这可能会破坏交易。

Answer 1

首先，Flexbox 不是网格系统，也无意取代网格系统。

事实上，Bootstrap 4 仍然具有几乎相同的网格系统，但 BS4 现在增加了使用 Flexbox 的一些优点的能力。

至于浮动...是的，如果将父元素设置为

display:flex

，则直接子元素（flex-children或flex-items）无法浮动。

但是由于显示值不被继承，您的浮动contents仍然会很好地换行。

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://picsum.photos/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://picsum.photos/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>