首页 > > 网页制作 > css >

弹性盒子中的order

2019-12-15 16:00:37来源：博客园阅读 ()

弹性盒子中的order

order

order 属性设置或检索弹性盒模型对象的子元素出现的順序。。

注意：如果元素不是弹性盒对象的元素，则 order 属性不起作用。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flexbox Demo</title>
  <style>
    .container1 {
      height: 500px;
      display: flex;
      border: 2px solid #ccc;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
    }

    .item {
      width: 200px;
      height: 200px;
    }
  </style>
</head>
<body>
  <div class="container1">
    <div class="item" style="background-color: red;order: 1"></div>
    <div class="item" style="background-color: yellow;order: 1"></div>
    <div class="item" style="background-color: blue;order: -1"></div>
  </div>
</body>
</html>

详解查看官方解释

原文链接:https://www.cnblogs.com/ygjzs/p/12043915.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有