FLEXBOX | How to push one element to bottom and separate the rest to top

[pamadesign]

Hi,

I’m searching a solution for the Flexbox. There are some criteria for the content inside the Flexbox:

1. The Columns should all have the same hight
2. Just the button needs to be at the bottom
3. Image, Headline, Text Element should be located at the top

So i need flexible space only between text and button. Is there a way to do that?
Cheers, Pascal

[tristup]

Hi Pascal,

Thanks for reaching out.
This can be achieved by following the below steps and structure explained. I went ahead and replicated the similar structure with 3 columns for the example.

1. Add 3 Columns in a Row which will be the parent row in this case.

2. Add inner rows into these columns with a 100% height by adding the custom CSS code into the Element CSS of the parent Row.

    $el .x-col .x-row
    {
        height:100%!important;
    }
   

3. Add 2 columns of 100% width i.e. 1 column per row into the Inner Row. [ as shown in the screenshot ]

4. Add the Button to the 2nd column of each Inner Row and set the Flexbox > Align Vertical value to End.
   
   

Hope it helps.
Thanks

[pamadesign]

Unfortunately your solution didn’t work… But i played a bit around with your idea and found a similar solution, not using a inner row with two columns but instead two inner rows. Then i can say the outer columns flexbox to have space between those two inner rows… Seems to work:

Thx to leading me to the right direction

[marc_a]

Hi @pamadesign,

We’re glad that my colleague @tristup is able to lead you to the right direction! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.