flex-order 属性用于定义flexbox的顺序。
下面的示例演示 order 属性。在这里,无涯教程创建了六个彩色框,它们的标签分别为1、2、3、4、5、6,它们以相同的顺序排列,然后使用1、2、5、6、3、4的顺序对其进行重新排序。 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>
它将产生以下输出-
链接:https://www.learnfk.comhttps://www.learnfk.com/css/flexbox-flex-order.html
来源:LearnFk无涯教程网
您还可以将–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>
它将产生以下输出-
链接:https://www.learnfk.comhttps://www.learnfk.com/css/flexbox-flex-order.html
来源:LearnFk无涯教程网
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)