HTML5 – Flex配置-2

by vivid 6. 五月 2015 00:52

.NET Magazine國際中文電子雜誌
者:許薰尹
稿:張智凱
文章編號:N150516001
出刊日期:2015/5/6

在這篇文章之中,將延續上一篇《HTML5 – Flex配置-1》文章的內容,介紹HTML5的Flex Box網頁配置功能,探討Flex Item的屬性。

Flex Item屬性:order

預設Flex Item會根據你在HTML定義的順序來排列,若要變更排列的順序,可以在Flex Item設定Order屬性。參考以下範例程式碼,4個<div>的順序為4、3、2、1:

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
  <title> </title>
  <style>
    .mainContainer {
      width: 200px;
      height: 100px;
      padding: 5px;
      border: 1px dotted red;
      display: flex;
    }

    .divItem {
      border: 1px solid blue;
      background: lightblue;
    }

    #div1 {
      order: 4;
    }

    #div2 {
      order: 3;
    }

    #div3 {
      order: 2;
    }

    #div4 {
      order: 1;
    }
  </style>
</head>
<body>
  <div id = "container" class= "mainContainer">
    <div id = "div1" class = "divItem"> div1 </div>
    <div id = "div2" class = "divItem"> div2 </div>
    <div id = "div3" class = "divItem"> div3 </div>
    <div id = "div4" class = "divItem"> div4 </div>
  </div>
</body>
</html>

 

此範例的執行結果,請參考下圖所示,顯示的順序是div4、div3、div2、div1:

clip_image002

圖 1

Flex Item屬性:flex-grow

flex-grow屬性定義Flex Item要如何分配Container剩餘的空間,參考以下範例程式碼,未設定flex-grow屬性:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style>
    .mainContainer {
      width: 500px;
      height: 100px;
      padding: 5px;
      border: 1px dotted red;
      display: flex;
    }

    .divItem {
      border: 1px solid blue;
      background: lightblue;
    }

  </style>
</head>
<body>
  <div id = "container" class= "mainContainer">
    <div id = "div1" class = "divItem"> div1 </div>
    <div id = "div2" class = "divItem"> div2 </div>
    <div id = "div3" class = "divItem"> div3 </div>
    <div id = "div4" class = "divItem"> div4 </div>
  </div>
</body>
</html>


 

範例的執行結果,請參考下圖所示:

clip_image004

圖 2

如果將flex-grow設為「1」,代表Flex Item平均分配Container剩餘空間,參考以下範例程式碼:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style>
    .mainContainer {
      width: 500px;
      height: 100px;
      padding: 5px;
      border: 1px dotted red;
      display: flex;
    }

    .divItem {
      border: 1px solid blue;
      background: lightblue;
       flex-grow: 1;
    }

  
  </style>
</head>
<body>
  <div id = "container" class= "mainContainer">
    <div id = "div1" class = "divItem"> div1 </div>
    <div id = "div2" class = "divItem"> div2 </div>
    <div id = "div3" class = "divItem"> div3 </div>
    <div id = "div4" class = "divItem"> div4 </div>
  </div>
</body>
</html>

 

則範例的執行結果,請參考下圖所示:

clip_image006

圖 3

若將div2的flex-grow屬性設為「3」,代表其分配的剩餘空間是其它的3倍大:

<style>
  .mainContainer {
    width: 500px;
    height: 100px;
    padding: 5px;
    border: 1px dotted red;
    display: flex;
  }

  .divItem {
    border: 1px solid blue;
    background: lightblue;
    flex-grow: 1;
  }

  #div2 {
    flex-grow: 3;
  }
</style>

 

則範例的執行結果,請參考下圖所示:

clip_image008

圖 4

Flex Item屬性:flex-shrink

flex-shrink這個屬性的行為恰巧和flex-grow相反,和當Container空間不夠時,flex-shrink屬性定義要如何縮小Flex Item的空間,以下範例div2設定「flex-shrink: 3」,分配到的空間縮小3倍,參考以下範例程式碼:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style>
    .mainContainer {
      width: 300px;
      height: 100px;
      padding: 5px;
      border: 1px dotted red;
      display: flex;
    }

    .divItem {
      border: 1px solid blue;
      background: lightblue;
      width: 100px;
    }

    #div2 {
      flex-shrink: 3;
    }
  </style>
</head>
<body>
  <div id = "container" class= "mainContainer">
    <div id = "div1" class = "divItem"> div1 </div>
    <div id = "div2" class = "divItem"> div2 </div>
    <div id = "div3" class = "divItem"> div3 </div>
    <div id = "div4" class = "divItem"> div4 </div>
  </div>
</body>
</html>


 

則範例的執行結果,請參考下圖所示:

clip_image010

圖 5

Flex Item屬性:flex-basic

flex-basic用來設定Flex Item的預設寬度,參考以下範例程式碼,將四個Flex Item的預設寬度設定為40px、50px、60px、70px:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style>
    .mainContainer {
      width: 300px;
      height: 100px;
      padding: 5px;
      border: 1px dotted red;
      display: flex;
    }

    .divItem {
      border: 1px solid blue;
      background: lightblue;
    }

    #div1 {
      flex-basis: 40px;
    }

    #div2 {
      flex-basis: 50px;
    }

    #div3 {
      flex-basis: 60px;
    }

    #div4 {
      flex-basis: 70px;
    }
  </style>
</head>
<body>

  <div id = "container" class= "mainContainer">
    <div id = "div1" class = "divItem"> div1 </div>
    <div id = "div2" class = "divItem"> div2 </div>
    <div id = "div3" class = "divItem"> div3 </div>
    <div id = "div4" class = "divItem"> div4 </div>
  </div>
</body>
</html>

 

 

則範例的執行結果,請參考下圖所示:

clip_image012

圖 6

Flex Item屬性:align-self

若Container設定了Flex屬性進行對齊,但其中有一個特殊的Flex Item與眾不同,需要個別做設定,此時便可以使用align-self`屬性,參考以下範例程式碼:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style>
    .mainContainer {
      width: 300px;
      height: 100px;
      padding: 5px;
      border: 1px dotted red;
      display: flex;
    }

    .divItem {
      border: 1px solid blue;
      background: lightblue;
    }

    #div2 {
      align-self: flex-start;
      font-size: 36px;
    }
  </style>
</head>
<body>
  <div id = "container" class= "mainContainer">
    <div id = "div1" class = "divItem"> div1 </div>
    <div id = "div2" class = "divItem"> div2 </div>
    <div id = "div3" class = "divItem"> div3 </div>
    <div id = "div4" class = "divItem"> div4 </div>
  </div>
</body>
</html>

 

範例的執行結果,請參考下圖所示,Div2會對齊上方:

clip_image014

圖 7

若設定為「align-self:flex-end;」,則範例的執行結果,請參考下圖所示:

clip_image016

圖 8

若設定為「align-self: center;」,範例的執行結果,請參考下圖所示:

clip_image018

圖 9

若設定為「align-self: baseline; 」,範例的執行結果,請參考下圖所示:

clip_image020

圖 10

Flex語法

最後我們來看精簡版的「flex」語法,這個語法可以接收三個參數,一次設定好flex-grow、flex-shrink與flex-basis屬性,參考以下範例程式碼:

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style>
    .mainContainer {
      width: 300px;
      height: 100px;
      padding: 5px;
      border: 1px dotted red;
      display: flex;
    }

    .divItem {
      border: 1px solid blue;
      background: lightblue;
      -ms-flex: 1 1 100px;
      flex: 1 1 100px;
    }

    #div2 {
      -ms-flex: 1 2 100px;
      flex: 1 2 100px;
    }
  </style>
</head>
<body>

  <div id = "container" class= "mainContainer">
    <div id = "div1" class = "divItem"> div1 </div>
    <div id = "div2" class = "divItem"> div2 </div>
    <div id = "div3" class = "divItem"> div3 </div>
    <div id = "div4" class = "divItem"> div4 </div>
  </div>
</body>
</html>

範例的執行結果,請參考下圖所示:

clip_image022

圖 11

參考資料

· Flexible Box Layout Module Level 1

l http://www.w3.org/TR/css-flexbox-1/

Tags:

.NET Magazine國際中文電子雜誌 | HTML | 許薰尹Vivid Hsu

新增評論




  Country flag
biuquote
  • 評論
  • 線上預覽
Loading






NET Magazine國際中文電子雜誌

NET Magazine國際中文電子版雜誌,由恆逸資訊創立於2000,自發刊日起迄今已發行超過500篇.NET相關技術文章,擁有超過40000名註冊讀者群。NET Magazine國際中文電子版雜誌希望藉於電子雜誌與NET Developer達到共同學習與技術新知分享,歡迎每一位對.NET 技術有興趣的朋友們多多支持本雜誌,讓作者群們可以有持續性的動力繼續爬文。<請加入免費訂閱>

月分類Month List