如何使用 flexbox 将按钮推到页面底部? [复制]
Posted
技术标签:
【中文标题】如何使用 flexbox 将按钮推到页面底部? [复制]【英文标题】:How can I push the button to the bottom of the page using flexbox? [duplicate] 【发布时间】:2018-08-17 20:16:48 【问题描述】:如何使用 flexbox 将按钮定位在最底部?
还是应该使用position: absolute
?
.container
display: flex;
flex-direction: column;
border: 1px solid;
height: 180px;
button
align-self: center;
<html>
<body>
<div class="container">
<p> Paragraph one </p>
<p> Paragraph two </p>
<button > on the very bottom </button>
</div>
</body>
</html>
【问题讨论】:
【参考方案1】:使用 flexbox,将flex-grow: 1;
添加到第二段。
.container
display: flex;
flex-direction: column;
border: 1px solid;
height: 180px;
p.flex-bottom
flex-grow: 1;
button
align-self: center;
<html>
<body>
<div class="container">
<p> Paragraph one </p>
<p class="flex-bottom"> Paragraph two </p>
<button > on the very bottom </button>
</div>
</body>
</html>
【讨论】:
以上是关于如何使用 flexbox 将按钮推到页面底部? [复制]的主要内容,如果未能解决你的问题,请参考以下文章
将按钮固定到 flexbox 列布局的底部,margin-top:auto 不起作用