1、order次序 默认值是0，这里order:6 值是6最大的所以排后面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style typ="text/css">
#jbrt{
width: 1200px;
height: 400px;
border: 2px solid blue;
margin: 50px auto;
display: flex;
flex-wrap: wrap;
/*flex-wrap: wrap-reverse;*/
/*flex-start与交叉轴的起点对齐*/
/*align-content: flex-start;*/
/*flex-end,与交叉轴的终点对齐， center 与交叉轴的中点对齐*/
/*space-between 与交叉轴的两端对齐，轴线之间的间隔平均分布*/
/*space-around 每根轴线两侧的间隔都相等。所以轴线之间的间隔比轴线与边框的间隔大一倍*/
/*stretch(默认值)轴线占满整个交叉轴*/
align-content: space-between;
}
#jbrt>div{
width: 300px;
height: 190px;
background: blueviolet;
font-size: 30px;
text-align: center;
outline: 1px solid blue;
/*flex: 1;*/
}
#jbrt>div:nth-child(3){
/*要想加二，就要上面也要加才行 比列*/
/*flex: 2;*/
}
</style>
</head>
<body>
<div id="jbrt">
<div>1</div>
<div>2</div>
<div style="order:2;">3</div>
<div style="order:6;">4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</body>
</html>
原文链接：https://www.qiquanji.com/post/7510.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知