Flexbox - Flex-Order
flex-order 属性用于定义 flexbox 项目的顺序。
以下示例演示了 order 属性。这里我们创建了六个彩色框,标签分别为一、二、三、四、五、六,以相同的顺序排列,我们使用 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 排序
您还可以为顺序分配 –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>
它将产生以下结果 −