Vertically Align rows with Ionic

I am trying to vertical align a slider usign this, but the class row row-bottom is align it to the bottom of the scroll div. I want it at the bottom of my screen. Actually what I’m trying to do is fill the hole screen with the 4 buttons and the slider, but for now if I can put the slider at the bottom is fine.

Here are some screenshots of what is going on:

And here is a pen:


Css flexbox to the rescue.

  display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: end;
    -moz-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;

Thanks for the reply!

In a big screen it looks awesome, but if I resize the window or view it on a cellphone it looks like this:

How can I fill (responsively) the screen with those elements?


Hmm, I’m having a tough time getting it to fill and retain that 2x2 layout for the buttons. Might I suggest taking advantage of the responsive breakpoints?

It will have the 2x2 layout on big screens, then stack the buttons on smaller screens.

Unfortunately this 2x2 is a design I have to make for a client, and he wants this. For a personal app I have no problem doing that. Nevermind, thanks for your time! I really appreciate it.

best of luck to you. If you need any reference with flex box, take a look at this site

Perfect, I am going to check it out. Thanks.