rockhammer rockhammer - 6 months ago 29
Javascript Question

stack flex items to bottom of flex container

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

display:flex
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
.searchForm
,
.tweetForm
and
.myMsg
. I'm currently resorting to putting a
.fudgeBox
on top to push them down to the bottom.

Answer

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