html span从上往下，从左往右排序

2020-04-06 15:06:09 阅读：742 来源： 互联网

标签：flex container 4n nth html child span 从左往右 order

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

标签：flex,container,4n,nth,html,child,span,从左往右,order
来源： https://www.cnblogs.com/QW-lzm/p/12642126.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

html span从上往下，从左往右排序