CSS, CSS3, 網頁設計

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

梅干2017/09/21
梅問題-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元素。
<article>
  <div>區塊-1</div>
  <div>區塊-2</div>
  <div>區塊-3</div>
</article>

Step2
接著再透過CSS,將每個div元素加入底色,與套用flex排版。
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;
  }

Step3
由於網頁由上向下讀,因此這時候HTML的區塊,就會依照順序顯示。
梅問題-CSS3教學-透過display:flex的order屬性,就可改成DOM元素的順序
Step4
這時候區塊的排序,就會從剛的1-2-3變成2-1-3。
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;}
梅問題-CSS3教學-透過display:flex的order屬性,就可改成DOM元素的順序
Step4
甚至在設定RWD時,更加的方便,就可以當解晰小於600像素時,DOM的區塊排序,就會變成3-2-1,有那flex oerder這屬性,對於版面排序是不是更加方便,但order這屬性,IE需11.0版本才有支援喔!
@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;}
}
梅問題-CSS3教學-透過display:flex的order屬性,就可改成DOM元素的順序
UAG軍規iPhone防摔殼