使用flex将元素定位到div的底部

我试图使用flex定位div的底部的按钮元素，但目前我没有找到任何解决方案。使用flex将元素定位到div的底部

让我想象：

我想在整个div的底部到button定位。实际样式：

.blackSquareContainer{ 
    flex: 1 1; 
    display: flex; 
    max-width: 500px; 
    min-height: 490px; 
}

我试着button风格：margin-top: 0但它显示有关blackSquareContainer右侧的按钮。我也试过position: absolute和bottom: 0 - 它也没有帮助。

我还需要添加，点击按钮添加一些行到blackSquareContainer以下div。不幸的是，即使我在该位置添加此按钮，如果我点击它，下面的div会增长并重叠它。 min-height也不帮忙;/

我该怎么做才能实现它？

来源

2016-02-23 bodley

您可以在容器上button使用margin-top: auto与flex-direction: column。

.blackSquareContainer{ 
 
    display: flex; 
 
    height: 400px; 
 
    width: 350px; 
 
    flex-direction: column; 
 
    align-items: flex-start; 
 
    border: 1px solid black; 
 
} 
 

 
button { 
 
    margin-top: auto; 
 
}

<div class="blackSquareContainer"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <button>Button</button> 
 
</div>

来源

2016-02-23 13:46:39

这对我不起作用，请参阅我在问题中添加的内容 – bodley

它必须工作https://jsfiddle.net/Lg0wyt9u/80/ –

哦，上帝，父容器比'blackSquareContainer'更低的最小高度，是的，它现在有效。 Ty为您提供帮助！ – bodley

为了证明从容器底部弯曲儿童，请使用justify-content: flex-end;

.blackSquareContainer{ 
    flex: 1 1; 
    display: flex; 
    justify-content: flex-end; 
    max-width: 500px; 
    min-height: 490px; 
}

来源

2016-02-23 13:42:57 Aziz

这不是为我工作。 – bodley

使用flex将元素定位到div的底部

回答

相关问题