how to change my icon layout to flex on css

I’m trying to change my icons to flex but that didn’t work. This was my original CSS code:

.recipe-icons {
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  gap: 1rem;
  margin: 2rem 0;
  text-align: center;
}

I also tried setting display to flex, justify-content to center and all that but that didn’t work either. How can I fix this? This is my html code for my icons:

div class="recipe-icons">
            <article>
              <!-- single recipe icon -->
              <i class="fas fa-clock"></i>
              <h5>prep time</h5>
              <p>30 min.</p>
              <!-- single recipe icon -->
              <i class="far fa-clock"></i>
              <h5>cook time</h5>
              <p>15 min.</p>
              <!-- single recipe icon -->
              <i class="fas fa-user-friends"></i>
              <h5>servings</h5>
              <p>6 servings</p>
              <!-- recipe tags -->
              <div class="recipe-tags">
                Tags: <a href="tag-template.html">beef</a>
                <a href="tag-template.html">breakfast</a>
                <a href="tag-template.html">pancakes</a>
                <a href="tag-template.html">food</a>
              </div>
            </article>
</div>