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

align self property rely on the alignment of an item in respect of the cross axis, not the main axis. So this is not the way to go. You have several options to achieve that using flexbox, though:

1) Use flex-grow:1 on your middle item. This will make it grow taking all remaining space in the container, thus pushing your last div to the bottom.

2) Refactor your layout so that there is a main div with justify-content:space-between so that your last div will be sticked to the bottom:

.container{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}
.body{
    display:flex;
    flex-direction:column;
}
.bottom{
    /* nothing needed for the outer layout */
}


    

        
top content
        
middle content
    
    

        bottom content
    

3) This is a bit weird, but you could even do that using align-self but inverting the flex direction and allowing items to wrap:

.container{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
}
.body{
    display:flex;
    flex-direction:column;
    flex-basis:100%;
}
.bottom{
    align-self:flex-end
}

I've tested all this out using this free flexbox designer: http://algid.com/Flex-Designer