stack flex items to bottom of flex container

Question

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.

score 2 · Accepted Answer · edited May 23 '17 at 12:23

2

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

edited May 23 '17 at 12:23

Community

1
1

answered May 11 '16 at 02:06

Michael Benjamin

346,931
104
581
701

1

Thanks, Michael. This is elegant. Works like magic! Alas my jsfiddle didn't quite represent my true code which also uses bootstrap 4. My real .sideRight also has the class col-md-4 which seems to prevent .sideRight from taking on height:100% and limits height of .sideRight to the sum of the elements within .sideRght. This seems to be preventing .searchForm { margin-top: auto; } from working. So I still need jquery to adjust height dynamically only I switched to adjusting margin-top of .searchForm instead of using a fudge div – rockhammer May 11 '16 at 07:31
Yeah, bootstrap and flexbox don't always play nice. You can sometimes override bootstrap by applying `!important` to your CSS, but it's hit and miss. Good luck :-) – Michael Benjamin May 11 '16 at 18:57
1

I figured out why .searchForm { margin-top: auto; } was not taking effect. The bootstrap sticky footer template uses min-height:100% instead of height:100%. Reading the definitions, these two should give the same effect but they don't. By replacing min-height with height, { margin-top: auto; } works. – rockhammer May 16 '16 at 05:45

score 1 · Answer 2 · answered May 11 '16 at 02:13

1

In your .sideRight css use justify-content instead of align-items. When you use flex-direction: column the flow direction changes to vertical so the usage of justify-... and align-... basically switch.

answered May 11 '16 at 02:13

Tyler

1,705
2
18
26

Thanks, Tyler, for the quick response – rockhammer May 11 '16 at 07:22

stack flex items to bottom of flex container

2 Answers2