您当前的位置： 首页 > 学无止境 > CSS3|Html5 网站首页CSS3|Html5
flex布局学习笔记之order
发布时间：2018-04-10 17:12:35编辑：雪饮阅读（）
flex布局中若给容器项目使用order则可以调节容器的排序,order数值越小越靠前,默认为0.
如下3个div,默认情况下应该是按照div在html语法中的顺序摆放的,但是由于这3个div使用了order排序,所以效果就不是默认的摆放顺序了.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
body{display:flex;}
#box1{
order:3;
background:pink;
width:80px;
height:100px;
}
#box2{
order:2;
background:green;
width:80px;
}
#box3{
order:1;
background:blue;
width:80px;
height:100px;
}
</style>
</head>
<body>
<div id="box1">第一个盒子</div>
<div id="box2">第二个盒子</div>
<div id="box3">第三个盒子</div>
</body>
</html>
关键字词：flex,order
相关文章
-
无相关信息