Is there really no way to wrap text around an image in flexbox?

问题

Normally when you have a block of text you can just float the image left or right to wrap the text around it, but in flexbox floats do not work and I am struggling to find a solution.

Bootstrap 4 is going to use flexbox for their new grid system but this might be a deal breaker if you can't have a block of text in a column and also have text wrap around an image.

回答1:

Firstly, flexbox is not a grid system nor is it intended to replace one.

Indeed, Bootstrap 4 still has pretty much the same grid system but BS4 now adds the ability to use some of the benefits of flexbox in addition.

As for floats...yes, if you set the parent element to display:flex the immediate children (flex-children or flex-items) cannot be floated.

BUT since the display value is not inherited, your floated contents will still wrap fine.

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>

回答2:

Not a full solution like float, but we can use '+' in css to wrap image's next tag.

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

来源：https://stackoverflow.com/questions/38663441/is-there-really-no-way-to-wrap-text-around-an-image-in-flexbox