使用flex在窗口的底部放置元素或框

Question

使用flexbox，我如何将.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推高，可以将margin-top auto设置为中心和底部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>