如何使内容在flexbox中的div周围漂浮？

Question

我有一个flexbox设计，需要添加一个应在父级内部“ float”的元素。面临的挑战是，父级内部的内容应围绕该浮动div缠绕 - 既左div and the the the div and the the div。宽度是静态的，但是高度是动态的。我知道它如何与内联块和浮子一起使用，但是想知道如何在Flexbox设计中进行操作。 先感谢您。

Answer 1

它实际上需要漂浮吗？还是可以通过将蓝色部分分为两个单独的元素来伪造它？

.container {
  display: flex;
  flex-wrap: wrap;
}

.aqua {
  background-color: aqua;
}

.pink {
  background-color: pink;
  flex: 0 0 300px;
}

.upper {
  flex: 1;
}

body {
  margin: 0;
}

p:first-child {
  margin-top: 0;
}

<div class="container">
  <div class="aqua upper">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget eros tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam iaculis consectetur dolor sed placerat. Fusce vel nunc posuere, dictum sem eget, ultrices risus. Mauris vel libero vel orci vulputate ultrices. Vivamus tincidunt enim augue, quis lacinia sapien venenatis lacinia. Aliquam erat volutpat. Cras scelerisque imperdiet lacus, at vulputate orci posuere ac. Cras nec rhoncus mauris. Suspendisse ut neque efficitur, gravida massa nec, volutpat nisl. Vestibulum dui dui, lobortis ac massa vitae, faucibus semper velit. Quisque imperdiet eleifend mauris, quis vestibulum felis interdum a. Cras egestas neque sit amet massa accumsan, in tincidunt felis molestie. Maecenas sit amet efficitur elit. Integer ornare libero at tempor iaculis.</p>
    <p>Ut quam arcu, porta at interdum vitae, volutpat rhoncus ipsum. Nunc efficitur lorem lectus, vitae maximus ipsum laoreet sit amet. Phasellus bibendum, sapien in pretium hendrerit, arcu diam laoreet ipsum, sed maximus augue odio eu magna. In et mattis eros. In hendrerit finibus facilisis. In laoreet velit neque, non tristique ante vehicula eget. In quis auctor eros. Vivamus tincidunt lobortis mauris a iaculis. Ut porttitor ut massa non sodales. Integer gravida tortor eget dui consectetur sagittis ut nec nisi. Proin mattis porttitor ligula. Nulla elementum sed metus in luctus. Aenean maximus vel ligula ac semper.</p>
  </div>
  <div class="pink">Pink section</div>
  <div class="aqua lower">
    <p>Ut lacus sem, consequat vel elementum nec, malesuada egestas urna. Proin metus magna, egestas nec sollicitudin at, euismod vehicula velit. Etiam velit dui, pellentesque a diam sit amet, vehicula sodales arcu. Nulla in sapien tristique, aliquam quam at, elementum mi. Aliquam vitae elementum leo. Curabitur tempus enim non euismod sodales. Morbi mollis pellentesque dui in placerat. Aliquam eleifend enim et orci malesuada, id finibus lacus tristique. Morbi aliquet est semper dolor tristique tempus. Ut hendrerit facilisis orci, at eleifend justo elementum quis. Fusce facilisis nisl a posuere vehicula. Maecenas a porttitor nisi, eget porttitor turpis. Phasellus mattis dolor elit, eu mollis tortor porta vehicula. Sed vitae mollis nisi. Integer vel molestie mi. Cras iaculis pellentesque nibh, at faucibus massa placerat et.</p>
    <div style="columns:2">
      <p>Nunc ut purus mauris. Maecenas ultrices, orci id dignissim condimentum, ipsum mauris dignissim est, feugiat dictum lectus nisi nec quam. Donec non convallis nisl. Donec id iaculis augue, facilisis imperdiet nunc. Quisque porta, ante nec tempus finibus, magna ligula fringilla massa, sagittis efficitur purus nunc sed est. Quisque mattis augue in arcu facilisis, sed malesuada nulla dignissim. Duis lobortis nisi lacus.</p>
      <p>Sed congue, ipsum non faucibus ultricies, sem leo tincidunt erat, quis dapibus elit tellus et metus. Duis ullamcorper vehicula turpis, in dictum nisi sagittis ac. Vestibulum aliquam ipsum nibh. Cras sed metus sed quam congue vestibulum at at magna. Nam aliquet eu enim in convallis. Maecenas quis eleifend dolor, sit amet mattis orci. Quisque feugiat ante at quam tincidunt vehicula. Vestibulum facilisis rutrum nisl, eget rhoncus tortor lacinia ac. Integer non nisl ut turpis sagittis fermentum. Vestibulum nec dictum velit. Maecenas pretium, magna quis mollis tincidunt, velit nisl fringilla ipsum, et volutpat est augue non leo. Nulla pulvinar felis sed enim tempus, feugiat vulputate leo sodales. Curabitur placerat mollis vestibulum. Quisque rhoncus, mi eu interdum porta, nisl dui fermentum metus, nec tempor metus felis quis sapien.</p>
      <p>Aliquam scelerisque at nisi sit amet dapibus. Fusce tincidunt metus a interdum facilisis. Sed nec porttitor lectus, id rutrum nunc. Aenean cursus fringilla leo, et scelerisque enim lobortis ut. Maecenas euismod lacus nec tempor tincidunt. Quisque turpis nisl, egestas sed leo eu, tincidunt congue ex. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent pulvinar, sem sit amet venenatis fermentum, est felis pellentesque elit, eget volutpat sem est sed sapien. Maecenas metus ligula, mattis sed lacus id, ultricies rutrum leo. Praesent eu interdum dui. Curabitur condimentum volutpat tortor sit amet dapibus. Integer sagittis metus orci, quis vestibulum leo scelerisque sed. Vestibulum at elementum neque. Mauris vehicula, ipsum vitae molestie posuere, erat purus tempus diam, blandit laoreet nulla libero et dolor. Donec a interdum elit. Nunc sollicitudin risus sit amet augue lacinia, ut pulvinar lectus pharetra.</p>
      <p>Aenean nec accumsan nunc. Curabitur nec suscipit odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non efficitur urna, in cursus tellus. Phasellus mollis varius posuere. Morbi posuere justo in dui consectetur viverra. Curabitur laoreet mi ut ligula fermentum, ut imperdiet urna gravida. Vestibulum eget consectetur tortor. Sed lobortis pulvinar turpis, eu vestibulum tortor mollis in. Nunc eleifend libero enim, non suscipit tellus fringilla at. In vitae porttitor velit. Fusce in purus imperdiet urna tempus dictum. Integer sagittis mauris dapibus dui mollis sagittis.</p>
    </div>
  </div>
</div>