Flexbox column align self to bottom

css flexbox
Laurens Kling picture Laurens Kling · Jul 11, 2014 · Viewed 77k times · Source

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

Torbjørn Angeltveit picture Torbjørn Angeltveit · Feb 1, 2016

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.

Related questions

Better way to set distance between flexbox items

To set the minimal distance between flexbox items I'm using margin: 0 5px on .item and margin: 0 -5px on container. For me it seems like a hack, but I can't find any better way to do this. Example

Read More
Flexbox: center horizontally and vertically

How to center div horizontally, and vertically within the container using flexbox. In below example, I want each number below each other (in rows), which are centered horizontally. http://codepen.io/anon/pen/zLxBo

Read More
How to align 3 divs (left/center/right) inside another div?

I want to have 3 divs aligned inside a container div, something like this: [[LEFT] [CENTER] [RIGHT]] Container div is 100% wide (no set width), and center div should remain in center after resizing the container. So I set: #container{width:100%;} #left{…

Read More