How does flex and flex-box works with bootstrap?

I'm learning CSS and for most of my work I use bootstrap. While building a static webpage, I discovered this property called flex in bootstrap5 utilities.

I understand that the point of flex is to make items align easily.

What I don't understand is:

While creating a div if we use this code

Code 1

<div class="mt-5">
  <div class="d-flex justify-content-center">
    <h5 class="h5 text-font">Credits.</h5>
  </div>
</div>

It aligns the content in center perfectly.

However, when I use the d-flex class in the outer div, it doesn't move from start.

Code 2

<div class="d-flex mt-5">
  <div class="justify-content-center">
    <h5 class="h5 text-font">Credits.</h5>
  </div>
</div>

Some questions in my mind related to Bootstrap5 flex are:

• So in this case why doesn't the heading move to the center when it's content are justified to center and parent div is a d-flex?

• How does moving elements inside a d-flex class in bootstrap5 works?

• What's the difference in working of d-flex in code 1 and code 2?