请记住，flexbox是在父级上启用的，这会影响直接的子级--但是子级也可以变成flex父级。

因此，您还需要将包含要居中的文本的容器设置为flexbox父级:

.container div *, .container2 div *{
  display: flex;
  justify-content: center;
}

或者，您可以使用text-align:center将文本与这些元素居中。

null

.container {
  display: flex;
  /*flex-direction: row; */
}

.container>div,
.container2>div {
  /* We are using .container div to apply this border to div elements in the main code */
  border: 1px solid black;
  padding: 5px;
  flex: 1;
}

.container div * {
  display: flex;
  justify-content: center;
}
.container2 div *{
  text-align: center;
}

.xbox1 {
  align-items: flex-end;
}

.box2 {
  order: 3;
}

.box3 {
  order: 2;
}

.container2 {
  display: flex;
  justify-content: space-between;
}

<div class="container">
  <div class="box1">
    <h3>Box1</h3>
    <p>Hello to kaisay ho aap log</p>
  </div>
  <div class="box2">
    <h3>Box2</h3>
    <p>Kaisa guzr rha quarantine</p>
  </div>
  <div class="box3">
    <h3>Box3</h3>
    <p>Bs shi chal rha hai sb kuch</p>
  </div>
</div>

<div class="container2">
  <div class="containers">
    <h3>Box5</h3>
    <p>What shall i do</p>
  </div>
  <div class="containers">
    <h3>Box6</h3>
    <p>What shall i do</p>
  </div>
  <div class="containers">
    <h3>Box7</h3>
    <p>What shall i do</p>
  </div>
</div>