<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>