フレックスを使用してウィンドウの下部に要素またはボックスを配置する

Question

フレックスボックスを使用して、.bottom divをウィンドウの下部に移動するにはどうすればよいですか？ .boxContainerのflex-directionはcolumnで、すべてを垂直方向に移動できます。私はalign-self: flex-endとalign-self: baselineを試しましたが、どちらも垂直にではなく、ボックスを水平に押しました。私は誰かが私がこれを解決するのを助けることができれば幸いです

.boxContainer { 
 
\t width: 100vw; 
 
\t height: 100vh; 
 
\t background: peachpuff; 
 

 
\t display: flex; 
 
\t align-items: center; 
 
\t justify-content: center; 
 
\t flex-direction: column; 
 
} 
 

 
.center { 
 
\t width: 300px; 
 
\t height: 150px; 
 
\t background: honeydew; 
 
} 
 

 
.bottom { 
 
\t width: 300px; 
 
\t height: 50px; 
 
\t background: cyan; 
 
\t align-self: flex-end; 
 
}

<div class="boxContainer"> 
 
\t <div class="center"></div> 
 
\t <div class="bottom"></div> 
 
</div>

Answer 1

あなたは宇宙の間にコンテンツを正当化し、それはあなたのためにトリックを行う必要が変更することができます。

センターdivを押し上げる必要はありません。マージントップの自動車を中央と下の両方のdivに設定することができます。

.boxContainer { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    background: peachpuff; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
.center { 
 
    width: 300px; 
 
    height: 150px; 
 
    background: honeydew; 
 
    margin-top: auto; 
 
} 
 
.bottom { 
 
    width: 300px; 
 
    height: 50px; 
 
    background: cyan; 
 
    margin-top: auto; 
 
}

<div class="boxContainer"> 
 
    <div class="center"></div> 
 
    <div class="bottom"></div> 
 
</div>

Answer 2

align-content: flex-end;でalign-self: flex-end;を交換してみてください.bottomクラスにmargin-top: autoを追加します。

.boxContainer { 
 
\t width: 100vw; 
 
\t height: 100vh; 
 
\t background: peachpuff; 
 

 
\t display: flex; 
 
\t align-items: center; 
 
\t justify-content: center; 
 
\t flex-direction: column; 
 
} 
 

 
.center { 
 
\t width: 300px; 
 
\t height: 150px; 
 
\t background: honeydew; 
 
} 
 

 
.bottom { 
 
\t width: 300px; 
 
\t height: 50px; 
 
\t background: cyan; 
 
\t align-content: flex-end; 
 
    margin-top: auto; 
 
}

<div class="boxContainer"> 
 
\t <div class="center"></div> 
 
\t <div class="bottom"></div> 
 
</div>