HTML5 – Flex配置-1

by vivid 22. 四月 2015 12:47

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

在HTML5的標準進入Recommendation階段之後,許多規範漸漸的明朗化,也比較不會讓人無所適從了,在這篇文章之中,我將介紹HTML5的Flex Box網頁配置功能,它是出自於CSS Flexible Box Layout Module Level 1(目前版本為W3C Last Call Working Draft, 25 September 2014),提供了更有效率、簡單的方式來進行網頁版面的配置動作,也非常適合於RWD響應式網頁設計。

Flex Layout Model的特色是能在容器類型的標籤中,定義其中包含的項目之對齊方式、間距等等功能,並能適當地調整項目的寬、高,以符合最佳的螢幕大小或裝置顯示的需求,此外它也可以很容易地以垂直堆疊的方式呈現區(block)內容,也可以水平排列方式呈現(Inline)。

下圖是W3C針對Flex Layout Model 的描述,Flex Box由容器(Container)與Flex項目(Flex Item)組成;一個Container之中可以有多個Flex Item。Flex Item的配置是根據main axis(主軸)與cross axis(交叉軸)為基礎,這兩軸有點類似數學的X、Y座標軸,不同的是它們會根據設定而方向不同,也就是說main axis(主軸)不一定會是水平橫軸,可能會變成垂直縱軸。

clip_image002

圖 1:圖片來源 http://www.w3.org/TR/css-flexbox-1/

使用flex配置

只要在容器類型的標籤設定樣式「display: flex」或「display: inline-flex」就可以啟用Flex配置。這兩者的差別是在flex以區塊(block)方式顯示;而inline-flex則以inline方式顯示。我們先以一個簡單的範例來看看如何套用Flex配置:

<!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>

 

在這個範例中定義了一個<div>(id="container")代表Flex容器,容器中有四個子<div>標籤,代表Flex Item,我們只需要在容器標籤設定「display: flex;」即可。這個範例的執行結果,請參考下圖所示,Flex Item根據定義的順序呈現:

clip_image004

圖 2

Flex容器屬性:flex-direction

若要變更Flex Item的排列方向,可以利用Flex Container的flex-direction屬性來設定主軸(main axis)方向,它可以設定為以下的值來決定其中的Flex Item排列方向:

  • row
  • row-reverse
  • column
  • column-reverse

參考以下範例程式碼,定義Flex容器的「flex-direction」屬性值為「row」:

<!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;
      -ms-flex-direction: row;
      flex-direction: row;
    }

    .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>


 

當「flex-direction」屬性直設定為「row」時,此範例的執行結果,請參考下圖所示:

clip_image006

圖 3

當「flex-direction」屬性直設定為「row-reverse」時,範例的執行結果,請參考下圖所示,排列方向和上個範例相反:

clip_image008

圖 4

當「flex-direction」屬性直設定為「column」時,範例的執行結果,請參考下圖所示,Flex Item垂直堆疊呈現:

clip_image010

圖 5

當「flex-direction」屬性直設定為「column-reverse時,範例的執行結果,請參考下圖所示,排列方向和上個範例相反:

clip_image012

圖 6

Flex容器屬性:flex-wrap

當Flex Container的寬度不足以一列的方式顯示所有的Flex Item時,flex-wrap屬性可以控制是否要自動進行換行的動作。參考以下的範例程式碼,Flex Container寬度只有500px,無法容納四個寬度為200px的Flex Item同時顯示,我們設定flex-wrap為「wrap」要求自動做換行:

<!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;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
    }

    .divItem {
      border: 1px solid blue;
      background: lightblue;
      width: 200px;
    }
  </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_image014

圖 7

若是Flex container的寬度可以容納所有的Flex Item,就不會做換行。例如,當上例的Flex container寬度為900px時:

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

  .divItem {
    border: 1px solid blue;
    background: lightblue;
    width: 200px;
  }
</style>

 

此範例的執行結果,請參考下圖所示,Flex Item水平排成一列顯示:

clip_image016

圖 8

若是Flex container的寬度無法容納所有的Flex Item,但設定了flex-wrap屬性為「nowrap」,例如以下範例程式碼:

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

    .divItem {
      border: 1px solid blue;
      background: lightblue;
      width: 200px;
    }
  </style>

 

則範例的執行結果,請參考下圖所示,Flex Item會寬度會自動縮小,以便能夠符合Flex容器(Container)的大小:

clip_image018

若設定flex-wrap屬性為「wrap-reverse」,則Flex Item排列方向和設定為「wrap」恰恰相反,例如定義以下的樣式:

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

  .divItem {
    border: 1px solid blue;
    background: lightblue;
    width: 200px;
  }
</style>


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

 

clip_image020

圖 9

Flex容器屬性:flex-flow

flex-flow屬性語法是flex-direction與flex-wrap兩個屬性語法的縮寫,可以一次同時定義這兩個屬性,預設flex-direction屬性的值是「row」;flex-wrap屬性的值是「wrap」。參考以下flex-flow屬性範例程式碼:

<!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;
      -ms-flex-flow: row wrap;
      flex-flow: row wrap;
    }

    .divItem {
      border: 1px solid blue;
      width: 200px;
      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_image022

圖 10

若將上個範例的樣式修改如下,設定flex-direction屬性的值是「row-reverse」;flex-wrap屬性的值是「wrap」:

<style>
  .mainContainer {
    width: 500px;
    height: 100px;
    padding: 5px;
    border: 1px dotted red;
    display: flex;
    -ms-flex-flow: row-reverse wrap;
    flex-flow: row-reverse wrap;
  }

  .divItem {
    border: 1px solid blue;
    width: 200px;
    background: lightblue;
  }
</style>


 

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

clip_image024

圖 11

Flex容器屬性:justify-content

justify-content這個屬性用來定義在主軸(Main axis)上Flex項目(Flex Item)的排列方式,以及在Container排列Flex Item時,若有多餘的空間該如何進行分配的動作。參考以下範例程式碼:

<!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;
      justify-content: flex-start;
    }

    .divItem {
      border: 1px solid blue;
      width: 100px;
      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>


 

當justify-content屬性值設定為「flex-start」,則Flex Item會從頭(main start)開始排列,此範例的執行結果,請參考下圖所示:

clip_image026

圖 12

若justify-content屬性值設定為「flex-end」,則對齊尾端(main end),範例的執行結果,請參考下圖所示:

clip_image028

圖 13

若justify-content屬性值設定為「center」,則範例的執行結果,請參考下圖所示:

clip_image030

圖 14

若justify-content屬性值設定為「space-between」,則Container多餘的空間將會平均分配到所有Flex Item 之間,範例的執行結果,請參考下圖所示:

clip_image032

圖 15

若justify-content屬性值設定為「space-around」,則Container多餘的空間將會平均分配到第一個項目之前、最後一個項目之後,以及所有 Flex Item 之間,範例的執行結果,請參考下圖所示:

clip_image034

圖 16

Flex容器屬性:align-items

align-items這個屬性用來定義在Cross axis(交叉軸)上項目的排列方式。參考以下範例程式碼,將align-items屬性的值設定為「flex-start」:

<!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;
      align-items: flex-start;
    }
    .divItem {
      border: 1px solid blue;
      width: 100px;
      background: lightblue;
    }
    #div3 {
      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>

 

align-items屬性的值設定為「flex-start」,則Flex Item將會對齊Cross Start,範例的執行結果,請參考下圖所示:

clip_image036

圖 17

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

clip_image038

圖 18

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

clip_image040

圖 19

若設定「align-items:stretch;」,則Flex Item會自動擴充,補滿Cross Axis的空間,範例的執行結果,請參考下圖所示:

clip_image042

圖 20

若設定「align-items: baseline;」, Flex Item會對齊文字的基準線:範例的執行結果,請參考下圖所示:

clip_image044

圖 21

Flex容器屬性:align-content

align-content這個屬性用來定義在交叉(Cross Axis)上Flex項目的排列方式,以及在Container排列Flex Item時,多餘的空間該如何進行分配的動作。參考以下範例程式碼,設定align-content屬性值為「flex-start」:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style>
    .mainContainer {
      width: 250px;
      height: 400px;
      padding: 5px;
      border: 1px dotted red;
      display: flex;
      flex-flow: row wrap;
      align-content:flex-start;
    }

      .divItem {
        border: 1px solid blue;
        width: 100px;
         background: lightblue;
      }
  </style>
</head>
<body>

  <div id="container" class="mainContainer">
    <div id="div1" class="divItem"> div1 Sapien elit in malesuada semper mi, id sollicitudin urna fermentum.</div>
    <div id="div2" class="divItem"> div2 Sapien elit in malesuada semper mi, id sollicitudin urna fermentum.</div>
    <div id="div3" class="divItem"> div3 Sapien elit in malesuada semper mi, id sollicitudin urna fermentum.</div>
    <div id="div4" class="divItem"> div4 Sapien elit in malesuada semper mi, id sollicitudin urna fermentum.</div>
  </div>
 
</body>
</html>

 

設定「align-content:flex-start;」,則Flex Item對齊cross start:範例的執行結果,請參考下圖所示:

clip_image046

圖 22

設定「align-content:flex-end;」,則靠齊cross end,範例的執行結果,請參考下圖所示:

clip_image048

圖 23

設定「align-content:center;」,則置中對齊,範例的執行結果,請參考下圖所示:

clip_image050

圖 24

設定「align-content:stretch;」,則自動填滿空間,範例的執行結果,請參考下圖所示:

clip_image052

圖 25

設定「align-content:space-around;」,則第一個項目之前、最後一個項目之後以及每個項目之間會平均分配多餘的空間,此範例的執行結果,請參考下圖所示:

clip_image054

圖 26

設定「align-content: space-between;」,則每個項目之間會平均分配多餘的空間,範例的執行結果,請參考下圖所示:

clip_image056

圖 27

參考資料

· 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