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

**URL:** <https://forum.ionicframework.com/t/vertical-align-two-items-streched-center-and-top-on-flexbox/15354>\
**Category:** ionic-v1\
**Created:** [January 8, 2015, 11:12pm UTC](https://forum.ionicframework.com/t/vertical-align-two-items-streched-center-and-top-on-flexbox/15354 "2015-01-08T23:12:27Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![naveenkarippai1](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/naveenkarippai1/32/91429_2.png) [@naveenkarippai1](https://forum.ionicframework.com/u/naveenkarippai1)\
**Post date:** [January 8, 2015, 11:12pm UTC](https://forum.ionicframework.com/t/vertical-align-two-items-streched-center-and-top-on-flexbox/15354/1 "2015-01-08T23:12:27Z")

</div>

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](http://the-echoplex.net/flexyboxes/)

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [January 8, 2015, 11:14pm UTC](https://forum.ionicframework.com/t/vertical-align-two-items-streched-center-and-top-on-flexbox/15354/2 "2015-01-08T23:14:41Z")

</div>

[Something like this?](http://the-echoplex.net/flexyboxes/?fixed-height=on&legacy=on&display=flex&flex-direction=row&flex-wrap=nowrap&justify-content=center&align-items=stretch&align-content=stretch&order%5B%5D=0&flex-grow%5B%5D=0&flex-shrink%5B%5D=1&flex-basis%5B%5D=auto&align-self%5B%5D=auto&order%5B%5D=0&flex-grow%5B%5D=0&flex-shrink%5B%5D=1&flex-basis%5B%5D=auto&align-self%5B%5D=auto)  
Can you show me visually what you’re trying to do.

---

<div class="post-metadata">

**Author:** ![naveenkarippai1](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/naveenkarippai1/32/91429_2.png) [@naveenkarippai1](https://forum.ionicframework.com/u/naveenkarippai1)\
**Post date:** [January 8, 2015, 11:27pm UTC](https://forum.ionicframework.com/t/vertical-align-two-items-streched-center-and-top-on-flexbox/15354/3 "2015-01-08T23:27:09Z")

</div>

@mhartington This is the visualisation.

 ![image](https://global.discourse-cdn.com/ionicframework/original/2X/0/089a132d2c14e261fcd4683f57722ee2731a4ff7.png)

---

<div class="post-metadata">

**Author:** ![naveenkarippai1](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/naveenkarippai1/32/91429_2.png) [@naveenkarippai1](https://forum.ionicframework.com/u/naveenkarippai1)\
**Post date:** [January 8, 2015, 11:34pm UTC](https://forum.ionicframework.com/t/vertical-align-two-items-streched-center-and-top-on-flexbox/15354/4 "2015-01-08T23:34:04Z")

</div>

![image](https://global.discourse-cdn.com/ionicframework/original/3X/2/6/26f7d91c7e32e0beee6cabcc989fea3920a082d7.png)

@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?

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [January 9, 2015, 12:17am UTC](https://forum.ionicframework.com/t/vertical-align-two-items-streched-center-and-top-on-flexbox/15354/5 "2015-01-09T00:17:40Z")

</div>

Something like this.

> **[Blank Starter - Nightly](https://codepen.io/mhartington/pen/qERXJL)**
>
> ...

---

<div class="post-metadata">

**Author:** ![naveenkarippai1](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/naveenkarippai1/32/91429_2.png) [@naveenkarippai1](https://forum.ionicframework.com/u/naveenkarippai1)\
**Post date:** [January 9, 2015, 12:32am UTC](https://forum.ionicframework.com/t/vertical-align-two-items-streched-center-and-top-on-flexbox/15354/6 "2015-01-09T00:32:54Z")

</div>

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