CSS CSS3 網頁開發

CSS3教學-透過display:flex的order屬性,就可改成DOM元素的順序

2017/09/20

梅問題-CSS3教學-透過display:flex的order屬性,就可改成DOM元素的順序

  身為網頁設計師的朋友都知道,當今天在切版時,HTML的結構長怎樣,就會依照HTML的先後順序,將區塊一個一個載入,因此當今天在設計RWD自適應網頁時,一定會遇到區塊堆疊的問題,比方在桌機時是橫的四個區塊,分別為1、2、3、4,但在手機版時,區塊就會由左向右堆疊,因此這時候的區塊就成變成上下排序,因此還是1、2、3、4,所以若希望在手機版是3、2、1、4時,可透CSS的float浮動靠齊,或是position來實現,說真的若區塊不多倒還好,但區塊一多時,還蠻容易弄錯的。


  其實這時候有個更簡易的方法,那就是可透過CSS3中的flex中的order屬性,就可透過CSS來修改HTML的DOM的順序,且設定絕對比float或position還簡單,更重要的是,這對於RWD自適網頁,區塊的排序更加的方便,雖然說flex在排版上,已相當的方便,現在再透過order屬性,會讓排版更加的有彈性,因此想要改變DOM的順序,現在就一塊來看看order這屬性的用法吧!


Step1
首先,先建立HTML的區塊元素結構,分別在article的元素中,再包了三個div元素。
[html]
<article>
<div>區塊-1</div>
<div>區塊-2</div>
<div>區塊-3</div>
</article>
[/html]
Step2
接著再透過CSS,將每個div元素加入底色,與套用flex排版。
[css]
article {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
}
article>div{
padding: 20px;
}
article>div:nth-of-type(1) {
background: #DED561;
}
article>div:nth-of-type(2) {
background: #DC3714;
}
article div:nth-of-type(3) {
background: #5EDCDF;
}
[/css]
Step3
由於網頁由上向下讀,因此這時候HTML的區塊,就會依照順序顯示。
梅問題-CSS3教學-透過display:flex的order屬性,就可改成DOM元素的順序
Step4
這時候區塊的排序,就會從剛的1-2-3變成2-1-3。

[css]
article>div:nth-of-type(1){-webkit-order: 2;}
article>div:nth-of-type(2){-webkit-order: 1;}
article>div:nth-of-type(3){-webkit-order: 3;}

article>div:nth-of-type(1){order: 2;}
article>div:nth-of-type(2){order: 1;}
article>div:nth-of-type(3){order: 3;}
[/css]
梅問題-CSS3教學-透過display:flex的order屬性,就可改成DOM元素的順序


Step4
甚至在設定RWD時,更加的方便,就可以當解晰小於600像素時,DOM的區塊排序,就會變成3-2-1,有那flex oerder這屬性,對於版面排序是不是更加方便,但order這屬性,IE需11.0版本才有支援喔!
[css]
@media screen and (max-width: 600px){
article>div:nth-of-type(1){-webkit-order: 3;}
article>div:nth-of-type(2){-webkit-order: 2;}
article>div:nth-of-type(3){-webkit-order: 1;}

article>div:nth-of-type(1){order: 3;}
article>div:nth-of-type(2){order: 2;}
article>div:nth-of-type(3){order: 1;}
}
[/css]
梅問題-CSS3教學-透過display:flex的order屬性,就可改成DOM元素的順序