order是设置在items里面的属性,具体作用是可以决定本身的排列先后顺序,
<style> .test{ height: 400px; width: 400px; background-color: #f00; /* 开启flex布局 */ display: inline-flex; } .box{ height: 100px; width: 100px; } .box1{ background-color: #ff0; /* 设置order属性 */ order: 1; } .box2{ background-color: #0f0; /* 设置order属性 */ order: 2; } .box3{ background-color: #fff; /*设置order属性*/ order:0; } </style> </head> <body> <div class="test"> <div class="box1 box">idems1</div> <div class="box2 box">idems2</div> <div class="box3 box">idens3</div> </div> </body>
由此可见order属性的属性值默认为0,值越小越排在前面。