Positionnement flexbox, un élément en haut un en bas

Question

J'ai un conteneur avec 2 éléments. J'ai utilisé flexbox pour les centrer, mais je veux en avoir un au milieu et un autre en bas, mais il doit également être centré.

.primary__section {
    background: url("../img/photo_up.png") no-repeat;
    background-size: cover;
    background-position: 50%;
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

&__logo {
    width: 260px;
}

Answer 1

Vous pourriez utiliser la marge :

.primary__section {
    background: url("../img/photo_up.png") no-repeat;
    background-size: cover;
    background-position: 50%;
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
}
[alt="middle"]{
  margin:auto;
}
[alt=" bottom"] {
  margin:0 auto 0;
}
/* let's test and see where the middle stands */
body {
  margin:0;
  background:linear-gradient(to left, transparent 50%, rgba(0,0,0,0.2) 50%),
    linear-gradient(to top, transparent 50%, rgba(0,0,0,0.2) 50%)
}

pour tester et jouer avec http://codepen.io/gc-nomade/pen/VKqGQm pour déterminer s'il est efficace ou s'il s'agit d'un bon compromis.