flexbox的order屬性－讓div照你希望的順序排列

在網頁上的區塊是依照html的書寫順序排列，但如果換成設計RWD自適應網頁時，有時為了閱覽方便或其他需求，會需要將原本的區塊順序作更動，雖然可以用float浮動或是position定位來設定，在調整上較為麻煩，這時我們可以使用flexbox(詳細介紹請看: CSS3的flexbox版面配置－flex container(容器)可用的屬性和CSS3的flexbox版面配置－flex items(子項目)可用的屬性) 裡的order屬性，此屬性可以直接以數字設定區塊的前後順序，非常快速！

首先寫一個html框架，內有四個div區塊，為方便區分設定order的前後差異，依照html裡的順序分別設001、002、003、004。

將最外圍的div的class命名為container，設display:flex

顯示出的如下圖

然後設order屬性，此範例設定四個div的順序為反過來，在html碼裡排列第一的div(001)設為order:4，以此類推。

為方便看出差異，另外加上每個div的order數值

可以清楚地發現，div的排列會跟著order的數值作更動。