[Day 16] flexbox order 順序

12th鐵人賽 css flexbox

placeholder name

2020-10-01 20:57:51

1603 瀏覽

預設中，彈性項目會以檔案中出現的順序做排列，但如果你想要做到不一樣的順序時怎麼辦呢？這時就可以使用 order 了指定順序。

order

.item {
    order: <integer>
}
預設值：0

英文小幫手：
integer 整數

範例

<style>
  .container {
    display: flex;
    width: 240px;
    height: 60px;
    background-color: #a5def5;
    margin: 120px;
  }
  .item{
    margin: 10px;
    width: 40px;
    height: 40px;
    background-color: #00A0E9;
    color: white;
  }
  .item1{
    order: 0; /*改變屬性值來看看變化*/
  }
  .item2{
    order: 0;/*改變屬性值來看看變化*/
  }
  .item3{
    order: 0; /*改變屬性值來看看變化*/
  }
</style>
<body>
  <div class="container">
    <div class="item item1">item1</div>
    <div class="item item2">item2</div>
    <div class="item item3">item3</div>
  </div>
</body>

注意：order 只對彈性容器內的彈性項目有效，對其它的元素沒有作用。

預設中，彈性項目會以檔案中出現的順序做排列，另外還有 flex-direction 也可以影響順序，但要對單一的彈性項目做順序的變更時就是使用 order 的時機。

order 的預設為 0，可以想像為彈性項目全部被分配為 0 號群組，並且在主軸上進行順序的排列，改變 order 的屬性值相當於換個群組，而數字越小排越前面、越大排越後面。合理來說所有的 order 為負值整數的彈性項目都會出現在 0 的前面，而大於 0 的整數則會在後面。

order 與 tab 的關係

範例2

<style>
  .container {
    display: flex;
    width: 360px;
    height: 60px;
    background-color: #a5def5;
    margin: 120px;
  }
  .item{
    margin: 10px;
    width: 40px;
    height: 40px;
    background-color: #00A0E9;
    color: white;
  }
  .item1{
    order: 0; /*改變屬性值來看看變化*/
  }
  .item2{
    order: 0;/*改變屬性值來看看變化*/
  }
  .item3{
    order: 0; /*改變屬性值來看看變化*/
  }
  .item4{
    order: 0; /*改變屬性值來看看變化*/
  }
  .item5{
    order: 0;/*改變屬性值來看看變化*/
  }
  .item6{
    order: 0; /*改變屬性值來看看變化*/
  }
</style>
<body>
  <div class="container">
    <a href="" class="item item1">item1</a>
    <a href="" class="item item2">item2</a>
    <a href="" class="item item3">item3</a>
    <a href="" class="item item4">item4</a>
    <a href="" class="item item5">item5</a>
    <a href="" class="item item6">item6</a>
  </div>
</body>

order 與 tab 的關係，就是沒有關係。在使用 order 時，不管你怎麼調換順序，使用 tab 來導覽頁面，一定是跟著檔案中原始碼的順序來進行導覽，所以在點擊 tab 時，還是會照著 item1 ~ 6 的順序導覽。

如果使用 order 來任意調換位置，而使用者又是需要使用 tab 來做網頁導覽的人，會因為原始碼順序和視覺上的順序不同，而造成使用上的困擾，所以盡量不要做像是把 footer 跟 header 寫反後再用 order 調換順序這種違反邏輯結構的方式來寫 code，這不是 order 的使用方式。

資料來源：