flex布局利用order排序
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">idems1div> <div class="box2 box">idems2div> <div class="box3 box">idens3div> div> body>
由此可见order属性的属性值默认为0,值越小越排在前面。