<h2>align-items: stretch // default</h2>
<div class="stretch" title="flex-direction:row"><i>1</i><i>2</i><i>3</i></div>
<div class="stretch" title="flex-direction:column"><i>1</i><i>2</i><i>3</i></div>

<h2>align-items: flex-start</h2>
<div class="flex-start" title="flex-direction:row"><i>1</i><i>2</i><i>3</i></div>
<div class="flex-start" title="flex-direction:column"><i>1</i><i>2</i><i>3</i></div>

<h2>align-items: flex-end</h2>
<div class="flex-end" title="flex-direction:row"><i>1</i><i>2</i><i>3</i></div>
<div class="flex-end" title="flex-direction:column"><i>1</i><i>2</i><i>3</i></div>

<h2>align-items: center</h2>
<div class="center" title="flex-direction:row"><i>1</i><i>2</i><i>3</i></div>
<div class="center" title="flex-direction:column"><i>1</i><i>2</i><i>3</i></div>

<h2>align-items: baseline</h2>
<div class="baseline" title="flex-direction:row"><i>1</i><i>2</i><i>3</i></div>
<div class="baseline" title="flex-direction:column"><i>1</i><i>2</i><i>3</i></div>
div{display:inline-flex;width:100px;height:100px;margin:0 2em 2em 0;outline:5px solid rgba(0,0,0,.5);vertical-align:top;position:relative;text-align:center;}
div:before,div:after{content:attr(title);position:absolute;left:-5px;right:-5px;top:0;bottom:0;margin:auto;height:14px;line-height:14px;color:#fff;white-space:nowrap;font-size:11px;text-align:center;}
div:before{background:rgba(0,0,0,.5);}
div:after{background:rgba(0,0,0,.75);}
h2+div:after,div+div:before{transform:rotate(90deg) translateY(-63px);}
h2+div:before,div+div:after{transform:translateY(63px);}
div:after{content:"cross axis";color:#ff0;}
div+div{flex-direction:column;}
i{color:#fff;min-width:25px;min-height:25px;line-height:25px;}
i:nth-child(1){background:red;}
i:nth-child(2){background:green;font-size:1.5em;}
i:nth-child(3){background:blue;font-size:2em;}

.stretch{align-items:stretch;}
.flex-start{align-items:flex-start;}
.flex-end{align-items:flex-end;}
.center{align-items:center;}
.baseline{align-items:baseline;}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.