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.

I want a div to stick to the bottom of the parent div using flexbox. With flex-direction: column and align-content: Space-between i can do this, but the middle div will align in the center, i want the middle one to be sticked to the top as well.

[top]

[middle]

-

-

-

[bottom]

align-self: flex-end will make it float right, not bottom.

complete flexbox docs: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 1

I'm a bit late to the party, but might be relevant for others trying to accomplish the same you should be able to do:

margin-top: auto 

on the element in question and it should go to the bottom. Should do the trick for firefox, chrome and safari.

Answer 2

Basically, the answer is to give to the last of the middle elements a flex grow 1 code as follows:

.middle-last{   flex-grow: 1; // assuming none of the other have flex-grow set } 

Thanks, T04435.