rockhammer rockhammer - 1 year ago 101
Javascript Question

stack flex items to bottom of flex container

I am trying to align/stack 3 items to the bottom of a

div. The only way I could manage it is by adding a 4th div on top & use javascript/jquery to adjust its height dynamically essentially to push those 3 items to the bottom.

Is there a pure CSS3 way to do this without resorting to javascript/jquery? Thanks

Here is fiddle. The 3 divs I want aligned/stacked to the bottom are
. I'm currently resorting to putting a
on top to push them down to the bottom.

Answer Source

Add this:

.searchForm { margin-top: auto; }

You can scrap the spacer div and all the JS.

An alternative would be justify-content: flex-end on the flex container (.sideRight).

Learn more about justify-content and auto margins here: Methods for Aligning Flex Items

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download