<div class="flex-container row align-content-start bg"> <div class="flex-item big">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> <div class="flex-item">4</div> <div class="flex-item">5</div> <div class="flex-item">6</div> <div class="flex-item">7</div> <div class="flex-item">8</div> <div class="flex-item">9</div> <div class="flex-item">10</div> <div class="flex-item">11</div> <div class="flex-item small-text">start</div> </div> <br> <div class="flex-container row align-content-end bg"> <div class="flex-item big">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> <div class="flex-item">4</div> <div class="flex-item">5</div> <div class="flex-item">6</div> <div class="flex-item">7</div> <div class="flex-item">8</div> <div class="flex-item">9</div> <div class="flex-item">10</div> <div class="flex-item">11</div> <div class="flex-item small-text">end</div> </div> <br> <div class="flex-container row align-content-center bg"> <div class="flex-item big">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> <div class="flex-item">4</div> <div class="flex-item">5</div> <div class="flex-item">6</div> <div class="flex-item">7</div> <div class="flex-item">8</div> <div class="flex-item">9</div> <div class="flex-item">10</div> <div class="flex-item">11</div> <div class="flex-item small-text">center</div> </div> <br> <div class="flex-container row align-content-stretch bg"> <div class="flex-item big">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> <div class="flex-item">4</div> <div class="flex-item">5</div> <div class="flex-item">6</div> <div class="flex-item">7</div> <div class="flex-item">8</div> <div class="flex-item">9</div> <div class="flex-item">10</div> <div class="flex-item">11</div> <div class="flex-item small-text">stretch</div> </div> <br> <div class="flex-container row align-content-space-between bg"> <div class="flex-item big">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> <div class="flex-item">4</div> <div class="flex-item">5</div> <div class="flex-item">6</div> <div class="flex-item">7</div> <div class="flex-item">8</div> <div class="flex-item">9</div> <div class="flex-item">10</div> <div class="flex-item">11</div> <div class="flex-item small-text">sp-bet</div> </div> <br> <div class="flex-container row align-content-space-around bg"> <div class="flex-item big">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> <div class="flex-item">4</div> <div class="flex-item">5</div> <div class="flex-item">6</div> <div class="flex-item">7</div> <div class="flex-item">8</div> <div class="flex-item">9</div> <div class="flex-item">10</div> <div class="flex-item">11</div> <div class="flex-item small-text">sp-ar</div> </div>
.flex-container { padding: 0; margin: 0; -ms-box-orient: horizontal; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; } .align-content-start { align-content: flex-start; } .align-content-end { align-content: flex-end; } .align-content-center { align-content: center; } .align-content-stretch { align-content: stretch; } .align-content-space-between { align-content: space-between; } .align-content-space-around { align-content: space-around; } .row { -webkit-flex-direction: row; flex-direction: row; flex-wrap: wrap; } .flex-item { background: deepskyblue; padding: 5px; width: 55px; margin: 5px; line-height: 50px; color: white; font-weight: bold; font-size: 2em; text-align: center; } .bg { background: #9E9E9E; height: 200px; } .small-text{ font-size: 1em; }