Search code examples
cssflexbox

Flexbox column align self to bottom

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/

Solution

  • 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.