使用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的底部

回答

相關問題