Vertical align two items streched (center and top) on Flexbox

Hey Folks!

Can someone show me how to align two items inside flex container vertically. One item occupying the center and other at the top position of the column (both streched horizontally)? . I get it easily working for three items but has been playing around for a while for just two items. Thanks in advance!!

flexbox

1 Like

Something like this?
Can you show me visually what you’re trying to do.

@mhartington This is the visualisation.

@mhartington This is my ultimate aim to get the blue boxes at these positions. So my approach is to first get two red items positioned in flex container(main page) and then create flex inside each red box to position blue boxes. Do you think it’s efficient?

Something like this.

This was perfect. I got it working. Thank you!

1 Like