如何不使用position：absolute在CSS中实现此样式？

Question

我正在使用Bootstrap 4从图像创建HTML页面。 这是图像：

但是我不知道如何用flexbox获得这种风格。 这是我到目前为止所做的 html：

  <section id="recursos">
    <div class="container">
      <h1 class="como-funciona text-center">Recursos disponíveis</h1>
      <div class="text-center"><img src="img/linha.png" class="img-fluid">
      <h3 class="ferramenta">Para turbinar o seu negócio no Instagram</h3>
    </div>

    <div class="container-center">
      <div class="left">
        <img src="img/icones/like.png">
        <h3>teste</h3>
        <p>description</p>
        <img src="img/icones/comentario.png">
        <h3>teste</h3>
        <p>description</p>
        <img src="img/icones/relatorio.png">
        <h3>teste</h3>
        <p>description</p>
      </div>
      <div class="center">
      <!-- this is where i was going to put the phone image -->
      </div>
      <div class="right">
      <!-- and here is equal to left elements -->
      </div>
    </div>


    </div>
  </section>

css

.container-center{
  display:flex;
  justify-content: center;
  align-items: center;
   }

.left{
  width:33.33vw;
  display: inline-grid;
}

.center{
  background:gold;
   width:33.33vw;
}

.right{
  background:gray;
   width:33.33vw;
}

你们能帮我解决这个问题吗？我不知道如何将h3文字和图像描述一起放置。

我可以使用绝对位置来做到这一点，但我知道这样做不是正确的方法。

非常感谢。

Answer 1

我不想提供确切的答案，但是，我确实草拟了一些可以帮助您的东西。

基本上，您只需要记住可以将flex box元素相互嵌套。