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

Posted 2023-03-06

【中文标题】真的没有办法在 flexbox 中的图像周围环绕文本吗？

【英文标题】：Is there really no way to wrap text around an image in flexbox?

【发布时间】：2016-12-04 10:39:17

【问题描述】：

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

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

【参考方案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://www.fillmurray.com/40/40"  />
      <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"  />
      <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>

【讨论】：

啊，谢谢你，这很有意义。应该想到只有.row才是display:flex;

【参考方案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>

【讨论】：

这并不能解决问题。