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

    
your header
    
your main with little content
    
your footer

CSS

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

footer{
    margin-top: auto;
}