Note: In order to place flex-items vertically, use the align-items property. For more info visit MDN.

Note: By default, flex-items are as tall as the parent element. The align-items property is more useful for flex-items of different heights.

align-items: flex-start
A flex item rownowrap
Another flex item rownowrap
A third flex item rownowrap
align-items: flex-end
A flex item rownowrap
Another flex item rownowrap
A third flex item rownowrap
align-items: center
A flex item rownowrap
Another flex item rownowrap
A third flex item rownowrap
align-items: baseline
A flex item rownowrap
Another flex item rownowrap
A third flex item rownowrap
align-items: stretch
A flex item rownowrap
Another flex item rownowrap
A third flex item rownowrap
align-items: safe center
A flex item rownowrap
Another flex item rownowrap
A third flex item rownowrap