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

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

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

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

<h2>flex-wrap: wrap <br>
align-content: space-between</h2>
<div class="space-between" title="flex-direction:row"><i>1</i><i>2</i><i>3</i><i>4</i></div>
<div class="space-between" title="flex-direction:column"><i>1</i><i>2</i><i>3</i><i>4</i></div>

<h2>flex-wrap: wrap <br>
align-content: space-around</h2>
<div class="space-around" title="flex-direction:row"><i>1</i><i>2</i><i>3</i><i>4</i></div>
<div class="space-around" title="flex-direction:column"><i>1</i><i>2</i><i>3</i><i>4</i></div>
div{display:inline-flex;flex-wrap:wrap;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{flex:0 0 33.33px;color:#fff;width:33.33px;height:33.33px;line-height:33.33px;}
i:nth-child(1){background:red;}
i:nth-child(2){background:green;}
i:nth-child(3){background:blue;}
i:nth-child(4){background:navy;}

.stretch{align-content:stretch;}
.flex-start{align-content:flex-start;}
.flex-end{align-content:flex-end;}
.center{align-content:center;}
.space-between{align-content:space-between;}
.space-around{align-content:space-around;}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.