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

问题描述

通常，当您有一个文本块时，您可以向左或向右浮动图像以将文本环绕在它周围，但在 flexbox 中浮动不起作用，我正在努力寻找解决方案.

Bootstrap 4 将在他们的新网格系统中使用 flexbox，但如果您不能在列中包含文本块并且文本环绕图像，这可能会破坏交易.

解决方案

首先，flexbox 不是一个网格系统，也不是要取代它.

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

对于浮动...是的，如果您将父元素设置为 display:flex，则 immediate 子元素(flex-children 或 flex-items)不能浮动.

但是由于显示值不是继承的，您浮动的内容仍然可以很好地包裹.

img {向左飘浮;右边距:1em；}.col-md-6，.col-sm-6 {背景:粉红色；}.排 {显示:弹性；}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="样式表"/><div class="容器"><div class="row"><div class="col-md-6 col-sm-6"><img src="http://www.fillmurray.com/40/40" alt=""/><p>Lorem ipsum dolor sat amet, consectetur adipisicing 精英.Doloremque explicabo aspernatur delectus voluptate，nesciunt quibusdam ab reprehenderit，non et temporibus.Aut commodi, voluptates nulla deleniti pariatur vitae vel eos sat asperiores aliquid,Molestiae recusandae placeat corporisearumassistanta dolorem！Earum necessitatibus tempora enim nisi officiis in. Ducimus illo placeat Eveniet.</p>

<div class="col-md-6 col-sm-6"><img src="http://www.fillmurray.com/40/40" alt=""/><p>Lorem ipsum dolor sat amet, consectetur adipisicing 精英.Doloremque explicabo aspernatur delectus voluptate，nesciunt quibusdam ab reprehenderit，non et temporibus.Aut commodi, voluptates nulla deleniti pariatur vitae vel eos sat asperiores aliquid,Molestiae recusandae placeat corporisearumassistanta dolorem！Earum necessitatibus tempora enim nisi officiis in. Ducimus illo placeat Eveniet.</p>

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.

解决方案

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>

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