多根轴线的对齐方式 order值排序
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,我们将及时处理。
微信扫码关注
更新实时通知