Utiliser flexbox pour aligner 2 divs : l'une au centre et l'autre en bas au centre

Question

J'essaie d'utiliser flexbox pour aligner deux divs à l'intérieur de leur parent, l'un complètement centré et l'autre centré en bas. Les deux divs partagent le même parent. Le résultat devrait ressembler à ceci :

------------------------
|                      |
|                      |
|                      |
|                      |
|        ------        |
|        | b1 |        |
|        |    |        |
|        ------        |
|                      |
|        ------        |
|        | b2 |        |
|        ------        |
------------------------

Voici ce que j'ai jusqu'à présent :

div {
  box-sizing: border-box;
  border: 1px black solid;
}

.text-center{
  text-align:center;
}

.flex-wrap {
  width:400px;
  height: 400px;
  background: #ddd;
  display: flex;
  align-items: flex-start; 
}

.flex-centered {
  align-self: center;
}

.flex-bottom-center {
  align-self: flex-end;
}

<div class="flex-wrap">
  <div class="flex-centered text-center">
    Here is some text for the center
  </div>

  <div class="flex-bottom-center text-center">
    Here is some text for the bottom center
  </div>
</div>

Il semble que l'on y soit presque arrivé, mais la première case est alignée à gauche tandis que la dernière est alignée à droite.

Quelqu'un peut-il nous aider ?

Editer : il ne s'agit pas de la même question que celle citée dans le marquage de la mienne comme duplicate : cette question demande comment faire pour que le bas de l'échelle soit le même. div équidistante du centre div et le bas. Le mien demande comment placer le fond div au fond du conteneur.

Answer 1

Vous pouvez passer à flex-direction: column et vous pouvez ensuite utiliser les marges pour positionner divs

div {
  box-sizing: border-box;
  border: 1px black solid;
}
.text-center{
  text-align:center;
}

.flex-wrap {
  width:400px;
  height: 400px;
  background: #ddd;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.flex-centered, .flex-bottom-center {
  margin-top: auto;
}

<div class="flex-wrap">
  <div class="flex-centered text-center">Here is some text for the center</div>
  <div class="flex-bottom-center text-center">Here is some text for the bottom center</div>
</div>

Si vous souhaitez positionner .flex-centered au centre vertical de l'élément parent, vous devez le retirer du flux d'éléments avec position: absolute

div {
  box-sizing: border-box;
  border: 1px black solid;
}
.text-center {
  text-align: center;
}
.flex-wrap {
  width: 400px;
  height: 400px;
  background: #ddd;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  position: relative;
  align-items: center;
}
.flex-centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="flex-wrap">
  <div class="flex-centered text-center">Here is some text for the center</div>
  <div class="flex-bottom-center text-center">Here is some text for the bottom center</div>
</div>