<html> <head> <meta charset="utf-8"/> <title>从上往下,从左往右</title> <style> #flex-container {flex-flow:column wrap; } #flex-container > :nth-child(4n - 2) { order: 1; } #flex-container > :nth-child(4n - 1) { order: 2; } #flex-container > :nth-child(4n - 0) { order: 3; } #flex-container > :nth-child(-n + 4) { page-break-before: always; /* Old syntax */ break-before: always; /* New syntax */ border-top: 1px solid; } </style> </head> <body> <div id="flex-container"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> <span>7</span> <span>8</span> <span>9</span> <span>10</span> </div> </body> </html>