<p class="bg-title"> flex-wrap: normal </p> <ul class="flex-container row"> <li class="flex-item">1</li> <li class="flex-item">2</li> <li class="flex-item">3</li> <li class="flex-item">4</li> <li class="flex-item">5</li> <li class="flex-item">6</li> <li class="flex-item">7</li> <li class="flex-item">8</li> <li class="flex-item">9</li> <li class="flex-item">10</li> <li class="flex-item">11</li> <li class="flex-item">12</li> <li class="flex-item">13</li> </ul> <p class="bg-title"> flex-wrap: wrap </p> <ul class="flex-container row-wrap"> <li class="flex-item">1</li> <li class="flex-item">2</li> <li class="flex-item">3</li> <li class="flex-item">4</li> <li class="flex-item">5</li> <li class="flex-item">6</li> <li class="flex-item">7</li> <li class="flex-item">8</li> <li class="flex-item">9</li> <li class="flex-item">10</li> <li class="flex-item">11</li> <li class="flex-item">12</li> <li class="flex-item">13</li> </ul> <p class="bg-title"> flex-wrap: wrap-reverse </p> <ul class="flex-container row-wrap-reverse"> <li class="flex-item">1</li> <li class="flex-item">2</li> <li class="flex-item">3</li> <li class="flex-item">4</li> <li class="flex-item">5</li> <li class="flex-item">6</li> <li class="flex-item">7</li> <li class="flex-item">8</li> <li class="flex-item">9</li> <li class="flex-item">10</li> <li class="flex-item">11</li> <li class="flex-item">12</li> <li class="flex-item">13</li> </ul>
.flex-container { padding: 0; margin: 0; list-style: none; -ms-box-orient: horizontal; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex; } .row-wrap { -webkit-flex-direction: row; flex-direction: row; flex-wrap: normal; } .row-wrap li { background: deepskyblue; } .row-wrap { -webkit-flex-direction: row; flex-direction: row; flex-wrap: wrap; } .row-wrap-reverse { -webkit-flex-direction: row; flex-direction: row; flex-wrap: wrap-reverse; } .row-wrap-reverse li { background: lightgreen; } .flex-item { background: tomato; padding: 5px; width: 50px; height: 50px; margin: 5px; line-height: 50px; color: white; font-weight: bold; font-size: 2em; text-align: center; } .bg-title{ background: black; color: white; display:inline; }