flex-order 属性用于定义flexbox项的顺序.
以下示例演示订单属性.在这里,我们创建了六个彩色方框,标签分别为一个,两个,三个,四个,五个,六个,按相同的顺序排列,我们按顺序重新排序一个,两个,五个,六个,三个,四个,使用flex-order属性.
<!doctype html> <html lang = "en"> <style> .box{ font-size:35px; padding:15px; } .box1{background:green;} .box2{background:blue;} .box3{background:red; order:1} .box4{background:magenta; order:2} .box5{background:yellow;} .box6{background:pink;} .container{ display:inline-flex; border:3px solid black; flex-direction:rows; flex-wrap:wrap; } </style> <body> <div class = "container"> <div class = "box box1">One</div> <div class = "box box2">two</div> <div class = "box box3">three</div> <div class = "box box4">four</div> <div class = "box box5">five</div> <div class = "box box6">six</div> </div> </body> </html>
它将产生以下结果 :
您还可以为订单分配-ve值,如下所示。
<!doctype html> <html lang = "en"> <style> .box{ font-size:35px; padding:15px; } .box1{background:green;} .box2{background:blue;} .box3{background:red; order:-1} .box4{background:magenta; order:-2} .box5{background:yellow;} .box6{background:pink;} .container{ display:inline-flex; border:3px solid black; flex-direction:row; flex-wrap:wrap; } </style> <body> <div class = "container"> <div class = "box box1">One</div> <div class = "box box2">two</div> <div class = "box box3">three</div> <div class = "box box4">four</div> <div class = "box box5">five</div> <div class = "box box6">six</div> </div> </body> </html>