数字越小,排列越靠前,默认是0.
注意:和 z-index 不一样。

例子

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. <style>
  9. div {
  10. display: flex;
  11. width: 500px;
  12. height: 200px;
  13. background-color: blue;
  14. justify-content: center;
  15. }
  16. div span {
  17. width: 100px;
  18. height: 100px;
  19. background-color: red;
  20. }
  21. /*
  22. div span:nth-child(3) {
  23. align-self: flex-end;
  24. } */
  25. div span:nth-child(2) {
  26. order: -1;
  27. }
  28. </style>
  29. </head>
  30. <body>
  31. <div>
  32. <span>1</span>
  33. <span>2</span>
  34. <span>3</span>
  35. </div>
  36. </body>
  37. </html>