如果删除Flex布局，则可以使用float和shape-outside。
https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside shape-outside CSS属性定义一个形状（可以是非矩形的），相邻的内联内容应该环绕该形状。默认情况下，内联内容环绕其边距框;外部形状提供了一种自定义这种环绕的方法，使文本环绕复杂的对象而不是简单的框成为可能。
下面是一个普通的例子，你可以从中得到启发：

#container {
  width: 200px;
  height: 200px;
  border: 2px solid black;
  background: rgba(176, 75, 80, 0.5);
}

#example {
  position: absolute;
  text-align: justify;
  top: 50px;
  left: 50px;
  color: red;
  width: 100px;
  height: 100px;
  background: rgba(76, 175, 80, 0.5);
  clip-path: polygon(0 25%, 100% 0%, 83% 60%, 7% 82%);
}

#example:before {
  content: '';
  float: left;
  width: 100%;
  height: 30%;
  shape-outside:  polygon(0 0, 100% 0, 0 25%, 0 45%, 7% 100%, 0 100%, 0 44%, 0 34%);
  }
  #example [data-shape]{
  float:right;
  width:100%;
  height:100%;
  shape-outside: polygon(100% 0, 53% 40%, 0 100%, 100% 100%);
  }

<script defer src="https://pro.fontawesome.com/releases/v5.8.1/js/all.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" />

<div id="container">
  <div id="example">
  <b data-shape></b>
    <i class="fas fa-star fa-fw filled"></i>
    <i class="fas fa-star fa-fw filled"></i>
    <i class="fas fa-star fa-fw filled"></i>
    <i class="fas fa-star fa-fw filled"></i>
    <i class="fas fa-star fa-fw filled"></i>
    <i class="fas fa-star fa-fw filled"></i>
  </div>
</div>