Flexbox column align self to bottom

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.

I found my own solution, i will add it here for documentation value;

If you give the middle block height: 100% it will take up al the room in the middle. So the bottom block will be at the actual bottom and top and middle are on top.

UPDATE: This doesn't work for Chrome...

UPDATE: Found a way that works for FF/Chrome: setting flex-grow on a higher number (1 is enough) for [middle] will make it take full middle size. more info: http://css-tricks.com/almanac/properties/f/flex-grow/

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.