真的没有办法在flexbox中将文字环绕图像吗? [英] Is there really no way to wrap text around an image in flexbox?

问题描述

通常，当您有一段文本时，您可以只向左或向右浮动图像以在其周围环绕文本，但是在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将在其新的网格系统中使用flexbox，但是如果您不能在列中包含文本块并且也可以在图像周围换行，那么这可能会破坏交易.

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.

推荐答案

首先，flexbox不是网格系统，也不打算替代它.

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

实际上，Bootstrap 4仍然具有几乎相同的网格系统，但是BS4现在增加了使用flexbox 的一些优点的功能.

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.

对于浮点数...是的，如果将父元素设置为display:flex，则不能浮起立即子代(flex-children或flex-items).

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>

这篇关于真的没有办法在flexbox中将文字环绕图像吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！