flexbox positioning, ein artikel an oberster stelle unten

Question

Ich habe einen behälter mit 2 einzelteilen. Ich habe Flexbox verwendet, um sie zu zentrieren, aber ich möchte eine von ihnen in der Mitte und eine andere auf der Unterseite, aber er muss auch in der Mitte sein.

<section class="primary__section"> 
    <img class=" primary__section__logo " src=../img/logo_png.png alt=" "> 
    <img class=" primary__section__scroll " src=../img/scroll.png alt=" "> 
</section> 

.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

Sie könnten Marge verwenden:

.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%) 
 
}

<section class="primary__section"> 
 
    <img class=" primary__section__logo " src=../img/logo_png.png alt="middle"> 
 
    <img class=" primary__section__scroll " src=../img/scroll.png alt=" bottom"> 
 
</section>

zu testen und mit http://codepen.io/gc-nomade/pen/VKqGQm um herauszufinden, ob eine effiziente oder einen guten Kompromiss zu spielen.