Flexbox column align self to bottom

Question

Im trying to use Flexbox. http://css-tricks.com/almanac/properties/a/align-content/ this shows nice alignment options; but i would actually want a Top-top-bottom situation.

Answer 1

Considering that your website has a basic structure, here's a solution that I used and applied in a similar situation, with just a few lines of code:

HTML

<div class="site-container">
    <header>your header</header>
    <main>your main with little content</main>
    <footer>your footer</footer>
</div>

CSS

.site-container{
    min-height: 100vh;   //not necessary to calculate the height of the footer
    display: flex;
    flex-direction: column;
}

footer{
    margin-top: auto;
}