flex彈性盒子

<div class="container"><div class="box yellow"></div><div class="container" id="container2"><div class="box blue"></div><div class="box green"></div></div><div class="box red"></div> </div>

?css

.container{width:100%;display:flex;flex-wrap:wrap; } .box{width:100%; }@media only sccreen and (min-width:500px){.dark_blue{width:50%;}#container2{width:50%} }
/*利用order來控制div塊的順序，默認為0，大于0在前，小于0在后*/
@media only sccreen and (min-width:600px){.dark_blue{width:25%;order:1;}#container2{width:50%}.red{width:25%;order:-1;} }

?

轉載于:https://www.cnblogs.com/leiting/p/7471755.html

總結

以上是生活随笔為你收集整理的flex组合流动布局实例---利用css的order属性改变盒子排列顺序的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。