フレックスボックスの位置決め、最下部の1つのアイテム

Question

私は2つのアイテムを持つコンテナを持っています。 私はフレックスボックスを使ってそれらを中心にしていましたが、私はそれらの1つを中間に、もう1つを底に置いてほしいですが、彼は中心にいなければなりません。

<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

あなたはマージンを使用することができます効率的か良い妥協点かどうかを確認するために

.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>

テストするとhttp://codepen.io/gc-nomade/pen/VKqGQmと遊びます。