<h4>nowrap</h4> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> <h4>wrap</h4> <ul id="second"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> <h4>wrap-reverse</h4> <ul id="third"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul>
ul { display: flex; width: 400px; padding: 4px; border: 1px solid #ddd; } li { width: 50px; height: 50px; list-style:none; border: 1px solid #ddd; background: #eee; } li + li { margin-left: 10px; } ul#second{ flex-wrap: wrap; } ul#third{ flex-wrap: wrap-reverse; }