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

Question

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.

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